Dit is één mogelijke implementatie, er zijn meerdere implementaties mogelijk.
Tooltips zijn een kleine informatievensters die verschijnen bij hover of focus van een element. Ze geven extra informatie zonder je interface vol te proppen.
Gebruik een tooltip:
- Voor korte hulpteksten bij formuliervelden
- Om icoontjes uit te leggen
- Bij afkortingen of technische termen
Een goede tooltip:
- Blijft staan als bij hover en focus
- Verdwijnt niet vanzelf
- Kan worden verborgen met Escape
Technische opbouw
- (4.1.2) De tooltip moet
role="tooltiphebben - (1.3.1) Het element dat de tooltip triggert moet
aria-describedbyhebben met hetidvan de bijbehorende tooltip - (4.1.2) Een niet-zichtbare tooltip moeten verborgen zijn (
hiddenofdisplay: none)
Toetsenbord
- Escape:
- Bij een uitgevouwen tooltip: sluit de tooltip
Voorbeeld tooltip
See the Pen Tooltip by Niek (@niekd) on CodePen.
Bronnen
- Tooltip Pattern | APG | WAI | W3C (Engelstalig)
- Tooltips & Toggletips (Engelstalig)
- Building a fully-accessible help tooltip (Engelstalig)