CSS Tooltip
- Previous Page CSS Animation
- Next Page CSS Image Style
通过 CSS 创建工具提示（Tooltip）。
演示：工具提示
Example
当用户将鼠标指针移到元素上时，工具提示通常用于提供关于某内容的额外信息：
基础的工具提示
创建一个鼠标移到元素上时显示的工具提示：
Example
<style>
/* Tooltip 容器 */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black; /* 如果需要在可悬停文本下面显示点线 */
}
/* Tooltip 文本 */
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* 定位工具提示文本 - 请看下面的例子 */
position: absolute;
z-index: 1;
}
/* 将鼠标悬停在工具提示容器上时，显示工具提示文本 */
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<div class="tooltip">Hover over me</div>
<span class="tooltiptext">Tooltip text</span>
</div>
Mga paglalarawan
HTML:
Gumamit ng elemento ng konteyner (halimbawa, <div>) at idinagdag dito "tooltip" Class. Kapag inililipat ang mouse ng user sa <div> na ito, ang teksto ng tool tip ay ipapakita.
Ang teksto ng tool tip ay nasa class="tooltiptext" ng mga nakakabit na elemento (gaya ng <span>).
CSS:
tooltip Class na gumagamit position:relative，para ilagay ang teksto ng tool tip (position:absolute）。Pansin: tungkol sa kung paano ilagay ang tool tip, tingnan ang halimbawa sa ibaba.
tooltiptext Class na pinag-iimbak ng tunay na teksto ng tool tip. Sa karaniwang sitwasyon, ito ay nakakalat at magiging nakikita kapag may paghanggang mouse (tingnan ang ibaba). Kami ay idinagdag din ang ilang pangunahing estilo: 120 pixel na lapad, itim na background, puting teksto, teksto sa gitna at 5px na padding sa itaas at sa ibaba (padding).
CSS border-radius Attribute na ginagamit upang magdagdag ng lufi sa teksto ng tool tip.
Kapag inililipat ang mouse ng user sa <div> na may class="tooltip":hover Pupuntirya para ipakita ang teksto ng tool tip.
Ilangugma ng tool tip
Sa halimbawa na ito, ang tool tip ay nasa kanan ng teksto na puwedeng mapunta (<div>)left:105%）。Higit pa,top:-5px Gumamit ng bilang upang ilagay ito sa gitna ng elemento ng kanyang konteyner. Gumamit kami ng numero 5 dahil ang bawat teksto ng tool tip ay may 5px na padding sa itaas at sa ibaba. Kapag pinakalaking ang padding, mangyaring palakihin din ito top Ang halaga ng attribute, upang masiguro na ito ay mananatili sa gitna. Kapag ilalagay ang tool tip sa kaliwa, ang halimbawa ay kapakinabangan din.
Right na tool tip
.tooltip .tooltiptext {
top: -5px;
left: 105%;
}
Result:
Left na tool tip
.tooltip .tooltiptext {
top: -5px;
right: 105%;
}
Result:
Kung gusto mong ilagay ang tool tip sa itaas o sa ibaba, tingnan ang halimbawa sa ibaba. Tingnan ang paggamit ng negatibong 60 pixel na left margin (margin-left). Ito ay ginagamit upang ilagay sa gitna ang tool tip at ang teksto na puwede mapunta. Ang halaga na ito ay ang kalahati ng lapad ng tool tip (120/2 = 60).
Top na tool tip
.tooltip .tooltiptext {
width: 120px;
bottom: 100%;
left: 50%;
margin-left: -60px; /* Gumamit ng kalahati ng lapad (120/2 = 60), upang ilagay sa gitna ng tool tip */
}
Result:
Bilanggit na tool tip
.tooltip .tooltiptext {
width: 120px;
top: 100%;
left: 50%;
margin-left: -60px; /* Gumamit ng kalahati ng lapad (120/2 = 60), upang ilagay sa gitna ng tool tip */
}
Result:
Sumambong ng tool tip
Kung gusto mong gumawa ng isang puno ng panig na nagpapakita ng sumambong, magdagdag ng 'walang laman' na nilalaman sa pagkatapos ng tool tip, at gamitin ang pangalawang elemento ng kategorya ::after at content attribute. Ang bakas mismo ay ginawa gamit ang border. Ito ay gawin ang tool tip na mukhang bubble.
Ang pagtatanghal nito ay kung paano magdagdag ng isang bakas sa ibaba ng tool tip:
Nakapatong sa ibaba
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 100%; /* Sa ibaba ng tooltip */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
Result:
Mga paglalarawan
Ilagay ang bakas sa loob ng tool tip:top: 100% Ilagay ang bakas sa ibaba ng tool tip.left: 50% Ito ay magiging sentro ng bakas.
Mga paalala:border-width Ang attribute na ito ay tumutukoy sa laki ng bakas. Kung nagsusubok ka ng pagbabago sa setting na ito, iwan mo rin ang: margin-left Gawing magkapareho ang halaga. Ito ay magiging sentro ng bakas.
border-color Ginagamit upang baguhin ang nilalaman ng bakas. Ginagamit namin ang kulay ng ibabaw na bokybok para maipatunayin ang bakas, ang iba ay transparent. Kung ang lahat ng panig ay kulay bokybok, ang magiging kulay bokybok ang pangwakas na kwadrado na bokybok.
Ang pagtatanghal nito ay kung paano magdagdag ng isang bakas sa itaas ng tool tip. Pansin ninyo, sa pamamagitan ng pagtatakda ng kulay ng ibabaw na bokybok:
Nakapatong sa itaas
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
bottom: 100%; /* Sa itaas ng tooltip */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent black transparent;
}
Result:
Ang pagtatanghal nito ay kung paano magdagdag ng isang bakas sa kaliwa ng tool tip:
Nakapatong sa kaliwa
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 50%;
right: 100%; /* Sa kaliwa ng tooltip */
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent black transparent transparent;
}
Result:
Ang pagtatanghal nito ay kung paano magdagdag ng isang bakas sa kanan ng tool tip:
Nakapatong sa kanan
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 50%;
left: 100%; /* Sa kanan ng tooltip */
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent transparent black;
}
Result:
Fade-in Tooltip (Animation)
If you want to fade in and out the tooltip text that will be displayed soon, you can use CSS transition property with opacity When used together, the properties will change from completely invisible to 100% visible within the specified number of seconds (in this example, 1 second):
Example
.tooltip .tooltiptext {
opacity: 0;
transition: opacity 1s;
}
.tooltip:hover .tooltiptext {
opacity: 1;
}
- Previous Page CSS Animation
- Next Page CSS Image Style
