CSS Tooltips
- Vorige pagina CSS Animaties
- Volgende pagina CSS Afbeeldingsstijlen
Maak een tooltip met CSS (Tooltip).
Demonstratie: tooltip
Voorbeeld
Wanneer de gebruiker de muispijl op een element verplaatst, wordt de tooltip vaak gebruikt om extra informatie over een bepaald onderwerp te bieden:
Basis tooltip
Maak een tooltip die verschijnt wanneer je de muis over een element verplaatst:
Voorbeeld
<style>
/* Tooltip container */
.tooltip {
positie: relatief;
weergave: inline-blok;
onderkant-bord: 1 px gepunkt zwart; /* Gebruik voor een doorlopende lijn onder het hoverbare tekst */
}
/* Tooltip tekst */
.tooltip .tooltiptext {
zichtbaarheid: onzichtbaar;
width: 120px;
achtergrond-kleur: zwart;
kleur: #fff;
tekst-alignment: midden;
inleg: 5 px 0;
radius-kant: 6 px;
/* Positioneer de tooltip tekst - zie onderstaande voorbeelden */
position: absolute;
z-index: 1;
}
/* Toon de tooltip tekst wanneer de muis over de tooltip container wordt gehouden */
.tooltip:hover .tooltiptext {
zichtbaarheid: zichtbaar;
}
</style>
<div class="tooltip">Beweg de muis erover</div>
<span class="tooltiptext">Tooltip tekst</span>
</div>
Example explanation
HTML：
Gebruik het container element (bijvoorbeeld <div>) en voeg "tooltip" Klasse. Wanneer de gebruiker de muis op deze <div> houdt, wordt de tooltip tekst weergegeven.
Tooltip tekst staat in class="tooltiptext" van ingesloten elementen (zoals <span>).
CSS:
tooltip Klasse gebruikt position:relative，gebruikt om de tooltip tekst te plaatsen (position:absolute）。Let op: Zie het volgende voorbeeld voor hoe je de tooltip kunt plaatsen.
tooltiptext Klasse bewaart de daadwerkelijke tooltip tekst. Standaard is het verborgen en wordt het zichtbaar bij muis hover (zie hierna). We hebben er ook enkele basisstijlen aan toegevoegd: 120 pixel breedte, zwart achtergrond, wit tekst, tekst centreren en 5px boven- en onderpad (padding).
CSS border-radius Eigenschap gebruikt om ronde hoeken toe te voegen aan de tooltip tekst.
Wanneer de gebruiker de muis naar de class="tooltip" <div> verplaatst.:hover Selectie gebruikt om de tooltip tekst weer te geven.
Positioneer de tooltip
In dit voorbeeld staat de tooltip aan de rechterkant van de 'hover' tekst (left:105%）。Let ook op dattop:-5px Gebruikt om het te plaatsen in het midden van het container element. We gebruiken het getal 5 omdat de horizontale en verticale marges van de tooltip tekst 5px zijn. Als je de marges vergroot, verhoog dan ook top Waarde van de eigenschap, om ervoor te zorgen dat het blijft zitten in het midden. Als je de tooltip aan de linkerkant wilt hebben, is dit ook van toepassing.
Rechter tooltip
.tooltip .tooltiptext {
top: -5px;
left: 105%;
}
Resultaat:
Linksonder tooltip
.tooltip .tooltiptext {
top: -5px;
right: 105%;
}
Resultaat:
Als je de tooltip wilt hebben aan de bovenkant of onderkant, zie dan het volgende voorbeeld. Let op, we gebruiken een negatieve 60 pixel margin-left eigenschap (margin-left). Dit is om de tooltip met de hoverbare tekst te centreren. Deze waarde is de helft van de tooltip breedte (120/2 = 60).
Boven tooltip
.tooltip .tooltiptext {
width: 120px;
bottom: 100%;
left: 50%;
margin-left: -60px; /* Gebruik de helft van de breedte (120/2 = 60), om de tooltip te centreren */
}
Resultaat:
Bodem tooltip
.tooltip .tooltiptext {
width: 120px;
top: 100%;
left: 50%;
margin-left: -60px; /* Gebruik de helft van de breedte (120/2 = 60), om de tooltip te centreren */
}
Resultaat:
Tooltip pijl
Om een pijl te maken die op de specifieke zijde van de tooltip wordt weergegeven, voeg dan 'lege' inhoud toe aan de tooltip en gebruik de pseudoelement klasse ::after and content properties. The arrow itself is created using the border. This makes the tooltip look like a bubble.
This example demonstrates how to add an arrow to the bottom of the tooltip:
Bottom arrow
.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;
}
Resultaat:
Example explanation
Position the arrow inside the tooltip:top: 100% Place the arrow at the bottom of the tooltip.left: 50% will center the arrow.
Note:border-width The property specifies the size of the arrow. If you change this setting, also change margin-left Change the value to the same value. This will center the arrow.
border-color Used to convert content into an arrow. We set the top border to black and the rest to transparent. If all sides are black, the final result will be a black square box.
This example shows how to add an arrow to the top of the tooltip. Please note that this time we set the bottom border color:
Top arrow
.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;
}
Resultaat:
This example demonstrates how to add an arrow to the left of the tooltip:
Left arrow
.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;
}
Resultaat:
This example demonstrates how to add an arrow to the right of the tooltip:
Right arrow
.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;
}
Resultaat:
Inlopende tooltip (animatie)
Als je wilt dat de tooltip tekst die binnenkort wordt weergegeven in- en uitloopt, kun je CSS transition Eigenschap met opacity Eigenschappen samen gebruiken en in de opgegeven seconden (bijvoorbeeld 1 seconde) van volledig onzichtbaar naar 100% zichtbaar veranderen:
Voorbeeld
.tooltip .tooltiptext {
opacity: 0;
transition: opacity 1s;
}
.tooltip:hover .tooltiptext {
opacity: 1;
}
- Vorige pagina CSS Animaties
- Volgende pagina CSS Afbeeldingsstijlen
