CSS verktygstips
- Föregående sida CSS animation
- Nästa sida CSS bildstilar
Skapa verktygstips (Tooltip) med CSS.
Demonstration: Verktygstips
Exempel
När användaren flyttar muspekaren över ett element, används verktygstips ofta för att ge ytterligare information om innehållet:
Grundläggande verktygstips
Skapa ett verktygstips som visas när musen flyttas över ett element:
Exempel
<style>
/* Tooltip kontejn */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black; /* Om du vill visa en punktlig linje under den hängande texten */
}
/* Tooltip text */
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Positionera verktygstips text - se exempel nedan */
position: absolute;
z-index: 1;
}
/* Visar verktygstips text när muspekaren pekar på verktygstips kontejnet */
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<div class="tooltip">Hover over me</div>
<span class="tooltiptext">Tooltip text</span>
</div>
例子解释
HTML：
Använd container-elementet (t.ex. <div>) och lägg till "tooltip" klassen. När användaren håller muspekaren över denna <div> visas verktygstips-texten.
Verktygstips-texten ligger i class="tooltiptext" inbyggda element (som <span>)
CSS:
tooltip Klassen används position:relative，används för att placera verktygstips-texten (position:absolute）。Observera: För hur man placerar verktygstips, se exempel nedan.
tooltiptext Klassen sparar den faktiska verktygstips-texten. Som standard är den dold och blir synlig vid muspekarens övergång (se nedan). Vi har också lagt till några grundläggande stilar: 120 pixels bredd, svart bakgrund, vit text, text centrerad och 5px övre och nedre inramning (padding).
CSS border-radius Egenskapen används för att lägga till rundade hörn på verktygstips-texten.
När användaren flyttar muspekaren över class="tooltip" <div>-en:hover Väljare används för att visa verktygstips-texten.
Placera verktygstips
I detta exempel är verktygstipsen placerad på höger sida av "hoverbar" texten (<div>)left:105%）。Observera också atttop:-5px Används för att placera den i mitten av dess container-element. Vi använder siffran 5 eftersom verktygstipsens övre och nedre inramningar är 5px. Om du ökar dess inramning, vänligen öka också top Värdet på egenskapen för att säkerställa att den förblir i mitten. Om du vill placera verktygstipsen på vänster sida gäller detta också.
Högerverktygstips
.tooltip .tooltiptext {
top: -5px;
left: 105%;
}
Resultat:
Vänsterverktygstips
.tooltip .tooltiptext {
top: -5px;
right: 105%;
}
Resultat:
Om du vill att verktygstipsen ska vara ovanpå eller under, se exempel nedan.Observera att vi använde en negativ 60 pixels vänster margin (margin-left).Detta är för att centrera verktygstipsen med den hängande texten. Värdet är halva verktygstipsens bredd (120/2 = 60).
Toppverktygstips
.tooltip .tooltiptext {
width: 120px;
bottom: 100%;
left: 50%;
margin-left: -60px; /* Använd halva bredden (120/2 = 60) för att centrera verktygstips */
}
Resultat:
Bottenverktygstips
.tooltip .tooltiptext {
width: 120px;
top: 100%;
left: 50%;
margin-left: -60px; /* Använd halva bredden (120/2 = 60) för att centrera verktygstips */
}
Resultat:
Verktygstipspil
För att skapa en pil som visas på den angivna sidan av verktygstips, lägg till "tomt" innehåll efter verktygstips och använd pseudoelementklassen ::after 和 content 属性。箭头本身是使用边框创建的。这会使工具提示看起来像气泡。
本例演示如何在工具提示的底部添加箭头：
底部箭头
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 100%; /* At the bottom of the tooltip */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
Resultat:
例子解释
将箭头定位在工具提示内：top: 100% 将箭头放置在工具提示的底部。left: 50% 将使箭头居中。
注意：border-width 属性指定箭头的大小。如果您更改此设置，也请将 margin-left 值更改为相同值。这将使箭头居中。
border-color 用于将内容转换为箭头。我们将上边框设置为黑色，其余设置为透明。如果所有面都是黑色，则最终将得到一个黑色的方形框。
本例演示了如何在工具提示的顶部添加箭头。请注意，这次我们设置了下边框的颜色：
顶部箭头
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
bottom: 100%; /* At the top of the tooltip */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent black transparent;
}
Resultat:
本例演示如何在工具提示的左侧添加箭头：
左侧箭头
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 50%;
right: 100%; /* To the left of the tooltip */
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent black transparent transparent;
}
Resultat:
本例演示如何在工具提示的右侧添加箭头：
右侧箭头
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 50%;
left: 100%; /* To the right of the tooltip */
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent transparent black;
}
Resultat:
In- och utbelysningseffekt för verktygstips (animation)
Om du vill att verktygstipsens text ska visa sig med en in- och utbelysningseffekt, kan du använda CSS transition egenskap med opacity Använd egenskapen tillsammans och ändra från helt osynlig till 100% synlig inom angivet antal sekunder (i detta exempel är det 1 sekund):
Exempel
.tooltip .tooltiptext {
opacity: 0;
transition: opacity 1s;
}
.tooltip:hover .tooltiptext {
opacity: 1;
}
- Föregående sida CSS animation
- Nästa sida CSS bildstilar
