CSS Tooltips
Een tooltip of hint is een informatieve tekst die verschijnt wanneer de gebruiker de muisaanwijzer boven een object plaatst. Tooltips verschijnen bij items waar dat wenselijk is, bijvoorbeeld als toelichting of als extra informatie.CSS basis tooltip
In het onderstaande voorbeeld maken we een basis tooltip die verschijnt wanneer de gebruiker de muis over een element beweegt:
Voorbeeld:
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptekst {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Positioneer de tooltip */
position: absolute;
z-index: 1;
}
/* Toon de tooltip */
.tooltip:hover .tooltiptekst {
visibility: visible;
}
Positioneren van tooltips
Om tooltips correct te positioneren, gebruik je de eigenschappenright, left, top en bottom.
Zie onderstaande voorbeelden als je wilt dat de tooltip boven of onder de tekst verschijnt:
Tooltip pijlen
Als je een pijl wilt maken die aan een specifieke kant van de tooltip moet verschijnen, voeg je 'lege' inhoud toe aan de tooltip, hiervoor kun je de pseudo-element selector::after samen met de content eigenschap gebruiken. De pijl zelf wordt gemaakt met behulp van randen. Hierdoor ziet de tooltip eruit als een tekstballon.
Dit voorbeeld laat zien hoe je een pijl onder aan de tooltip kunt toevoegen:
Voorbeeld:
.tooltip .tooltiptekst::after {
content: " ";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
Voorbeeld uitgelegd
Een pijl in de tooltip plaatsen:top: 100% zal de pijl onderaan de tooltip plaatsen. left: 50% zal de pijl centreren.
 |
De border-width eigenschap geeft de grootte van de pijl aan. Als je dit wijzigt, wijzigt automatisch de margin-left waarde. Hierdoor blijft de pijl gecentreerd. |
De border-color wordt gebruikt om de inhoud om te zetten in een pijl. We zetten de bovenrand op zwart en de rest op transparant. Als alle zijden zwart waren, zou je eindigen met een zwarte vierkant.
Dit voorbeeld laat zien hoe je een pijl boven de tooltip kunt plaatsen:
Voorbeeld:
.tooltip .tooltiptekst::after {
content: " ";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent black transparent;
}
Dit voorbeeld laat zien hoe je een pijl links van de tooltip kunt plaatsen:
Voorbeeld:
.tooltip .tooltiptekst::after {
content: " ";
position: absolute;
top: 50%;
right: 100%;
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent black transparent transparent;
}
Dit voorbeeld laat zien hoe je een pijl rechts van de tooltip kunt plaatsen:
Voorbeeld:
.tooltip .tooltiptekst::after {
content: " ";
position: absolute;
top: 50%;
left: 100%;
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent transparent black;
}
Fade in tooltips
Als je de tooltip-tekst wilt laten vervagen, kun je de CSS eigenschap transition samen met de opacity eigenschap gebruiken. Hier kan je dan ook het aantal seconden opgeven voor het vervagen van de tooltip.
