html-einfach.de

Barrierefreie Komponenten · Interaktive Widgets

Tooltips & Popover-API

Von Zuletzt geändert am

Ein kleiner Hinweis beim Überfahren eines Symbols, eine aufklappende Infobox – das klingt simpel, geht aber oft schief: Tooltips, die nur die Maus kennt, oder Popover, die den Fokus verschlucken. Dabei gibt es heute für beides saubere Wege, einer davon ganz neu und nativ.

Tooltips: Hinweis, kein Versteck

Ein Tooltip ist eine kurze, ergänzende Beschreibung. Wichtige Inhalte oder Bedienelemente gehören nicht hinein. Angebunden wird er per aria-describedby:

<button aria-describedby="tip-export">Exportieren</button>
<span role="tooltip" id="tip-export" hidden>Als CSV-Datei herunterladen</span>

Drei Regeln entscheiden über die Barrierefreiheit (WCAG 1.4.13 „Inhalt bei Hover oder Fokus“):

  • Per Hover UND Fokus auslösbar – sonst erreicht ihn die Tastatur nie.
  • Mit Esc schließbar, ohne den Mauszeiger wegbewegen zu müssen.
  • Hoverbar bleiben: Der Tooltip darf nicht verschwinden, wenn man mit der Maus zu ihm fährt.

Randnotiz – title ist kein guter Tooltip. Das native title-Attribut wird nur bei Maus-Hover gezeigt, ist auf Touch unsichtbar und von Screenreadern uneinheitlich behandelt. Für mehr als einen Notbehelf taugt es nicht – ein echtes Tooltip-Element mit aria-describedby ist verlässlicher.

Die Popover-API

Für aufklappende Boxen – Menüs, Infokarten, kleine Overlays – gibt es seit Kurzem eine native Lösung: das popover-Attribut. Der Browser übernimmt das Anzeigen, die oberste Ebene (Top-Layer), das Schließen per Klick daneben und per Esc – ganz ohne JavaScript.

<button popovertarget="info">Mehr Infos</button>
<div id="info" popover>
  <p>Dieser Bereich erklärt das Feature im Detail.</p>
</div>

Mit popover="auto" (Standard) schließt sich das Popover beim Klick nach außen (Light-Dismiss). Das ist ideal für nicht-modale Overlays. In älteren Browsern ohne Unterstützung bleibt das Element schlicht sichtbar oder verborgen – ein Fall für Progressive Enhancement.

Popover oder Dialog?

Popover Modaler Dialog
Sperrt den Hintergrund? nein ja
Fokus-Falle nein ja (gewollt)
Wofür Menüs, Hinweise, Karten erzwungene Entscheidung

Ein Popover ist nicht modal – der Rest der Seite bleibt bedienbar. Wenn du den Hintergrund sperren und den Fokus halten musst, ist das <dialog> das richtige Werkzeug.

Häufige Fehler

  • Tooltip nur bei Hover, unerreichbar für Tastatur und Touch.
  • Wichtige Inhalte im Tooltip statt im sichtbaren Text.
  • Kein Esc zum Schließen.
  • Popover für eine erzwungene Entscheidung nutzen, wo ein modaler Dialog gehört.
  • title als vollwertigen Tooltip missverstehen.

Häufige Fragen

Ist die Popover-API schon einsetzbar?

Ja, sie ist in aktuellen Browsern verfügbar. Plane einen sinnvollen Rückfall für ältere Browser ein, dann ist sie eine schlanke, native Wahl.

Brauche ich für die Popover-API noch ARIA?

Wenig. Der Browser regelt Top-Layer und Schließverhalten. Für die Bedeutung des Inhalts (z. B. ein Menü) ergänzt du passende Rollen wie gewohnt.

Wie sage ich einen Tooltip korrekt an?

Über aria-describedby am Auslöser, das auf das Tooltip-Element zeigt. So wird der Hinweis als ergänzende Beschreibung vorgelesen.

Fazit

Tooltips sind kurze Ergänzungen: per aria-describedby angebunden, über Hover und Fokus erreichbar, mit Esc schließbar – niemals als Versteck für Wichtiges. Für aufklappende, nicht-modale Boxen ist die native Popover-API die schlanke neue Wahl; sobald der Hintergrund gesperrt werden muss, nimmst du den modalen Dialog.