Tooltip

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="tooltip hebben
• (1.3.1) Het element dat de tooltip triggert moet aria-describedby hebben met het id van de bijbehorende tooltip
• (4.1.2) Een niet-zichtbare tooltip moeten verborgen zijn (hidden of display: 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)