Ben's Hobbyhoekje -- Tooltips in CSS

Tooltips in CSS

Hieronder staat een stukje lipsum met daarin een link. Als je er overheen gaat met de muis, verschijnt er een tooltip. Die is helemaal gemaakt met CSS. Er komen geen JavaScript en/of plaatjes aan te pas.
Op deze bladzijde wordt beschreven hoe je dit aanpakt. De code staat onderaan deze pagina. Je kunt hem ook downloaden om zelf te gebruiken.
N.B.: Op een aanraakscherm verschijnt de tooltip pas als je op de link tikt.

Lorem ipsum dolor sit amet Dit is de link elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

De plaats van de tooltip ten opzichte van de link ligt vast. De tooltip kan daardoor (gedeeltelijk) buiten de rechter rand van het document vallen. Om dat op te vangen is JavaScript nodig, dat kan berekenen hoever de tooltip naar links moet geschoven om dit op te vangen.
Elders op deze site is een tooltip beschikbaar die helemaal is geschreven in JavaScript. Die heeft dit probleem niet. Zie het item Lokale Popup in een <DIV>-tag I: mouseover / mouseout.
De pijlpunt (het driehoekje) wordt gemaakt met de techniek die is beschreven in het item Driehoeken tekenen met CSS.
De pijlpunt en de tooltip zelf worden gepositioneerd met behulp van de pseudo-elementen :before en :after, zie Content opmaken met :before en :after.
De tekst die in de tooltip verschijnt zet je in het attribuut data-tooltip in de <a>-tag. De CSS eigenschap content verzorgt de plaatsing in de tooltip.
Deze aanpak is niet beperkt tot links. Je kunt het voor elk element gebruiken. Een link heeft wel de voorkeur, omdat die in de opmaak duidelijk laat zien dat er "iets" onder zit.

Bron/inspiratie: jsbin.com.

Gebruik:

De code staat gedeeltelijk in de <HEAD> en in de <BODY>.

De code ziet er als volgt uit:

(Zet dit in de <HEAD>).

<style>
.Voorbeeld {
margin: 20px auto;
width: 85%;
}

.VbLink a:link {
position: relative;
}

.VbLink a:before {
content: "";
position: absolute;
border-top: 20px solid navy;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
display: none;
top: -18px;
left: -26px;
}

.VbLink a:after {
content: attr(data-tooltip);
position: absolute;
color: maroon;
top: -35px;
left: -26px;
background: #dfd;
border:2px solid navy;
padding: 5px 15px;
border-radius: 10px;
white-space: nowrap;
display: none;
}

.VbLink a:hover:after, a:hover:before {
display: block;
}
</style>

(Zet dit in de <BODY>, op de plaats waar de link moet verschijnen).

<a href="#" data-tooltip="Dit is een CSS-tooltip">

Downloaden:

Druk op de knop: File: voorb163.zip, 572 bytes.

Opmerking:

Je kunt vergelijkbare tooltips maken met JavaScript. Zie het item Tooltips in JavaScript.

Op aanraakschermen kun je niet boven een plaatje "Hoveren". Daar verschijnt de tooltip pas als je op een plaatje tikt.