Tooltip

Ein Tooltip (Kurzinfo) ist ein kleines Overlay, das zusätzliche Informationen zu einem Element anzeigt, wenn der Mauszeiger darüber schwebt oder das Element den Fokus erhält. Häufig werden Tooltips für Icon-Buttons, Fachbegriffe oder Formularhinweise eingesetzt.

WCAG 1.4.13 Inhalte bei Hover oder Fokus (AA)

• Schließbar: ohne Fokus- oder Mausbewegung, typischerweise mit Escape
• Hoverbar: Der Mauszeiger kann auf den Tooltip bewegt werden, ohne dass er verschwindet
• Dauerhaft: Er bleibt sichtbar, bis Hover/Fokus endet, er geschlossen wird oder die Information ungültig ist

Barrierefreie Umsetzung

• Auslöser muss fokussierbar sein (z. B. <button>); Tooltip erscheint auch bei Tastaturfokus
• Verknüpfung per aria-describedby auf ein Element mit role="tooltip"
• Nur ergänzende Informationen – wichtige Inhalte gehören sichtbar auf die Seite
• Auf Touch-Geräten gibt es kein Hover: Alternativ einen Info-Button mit Popover verwenden
• Das title-Attribut ist kein barrierefreier Tooltip

Häufige Fragen

Ist das Popover-API eine Alternative?

Ja. Das native popover-Attribut erleichtert Toggle-Tipps mit Light-Dismiss und Escape-Unterstützung; Beschriftung und Verknüpfung müssen trotzdem korrekt gesetzt werden.

Reicht ein Tooltip als Beschriftung für einen Icon-Button?

Nein. Der Button braucht zusätzlich einen zugänglichen Namen, etwa über aria-label oder visuell versteckten Text.

Verwandte Begriffe: aria-label, Tastaturnavigation, Touchscreen, Wahrnehmbar