Ein Tooltip ist ein kleines Informationsfenster, das beim Hovern über ein Interface-Element erscheint und kontextbezogene Erläuterungen zu Symbolen, Schaltflächen oder Formularfeldern liefert.
Was bedeutet das?
Tooltips gehören zu den ältesten Interaktionsmustern grafischer Benutzeroberflächen. Sie ermöglichen es, komplexe Funktionen oder Icons zu erläutern, ohne die eigentliche Oberfläche mit Text zu überladen. Der Nutzer sieht den Tooltip erst, wenn er mit der Maus über ein Element fährt oder es auf einem Touchscreen länger gedrückt hält. Sobald der Mauszeiger das Element verlässt, verschwindet das Informationsfenster wieder.
Im Web gibt es zwei grundlegende Wege, Tooltips umzusetzen. Die einfachste Methode ist das HTML-Attribut title, das in jedem beliebigen HTML-Element gesetzt werden kann. Der Browser stellt den Inhalt dieses Attributs als nativen Tooltip dar, meist als kleines gelbes Rechteck. Diese Methode ist barrierefrei, ohne weiteres JavaScript nutzbar, aber gestalterisch kaum beeinflussbar. Die zweite Methode sind JavaScript-basierte Custom-Tooltips, die per CSS beliebig gestaltet werden können. Hierbei wird der Tooltip-Inhalt über ein verstecktes HTML-Element oder per JavaScript-Bibliothek dynamisch erzeugt und ein- und ausgeblendet.
Für Barrierefreiheit ist wichtig, dass Tooltips auch für Tastaturnutzer und Screenreader zugänglich sind. Die WAI-ARIA-Spezifikation definiert die Rolle tooltip und das Attribut aria-describedby, mit dem ein Element auf seinen Tooltip verweisen kann. Ein Screenreader liest dann beim Fokussieren des Elements sowohl den Beschriftungstext als auch den Tooltip-Inhalt vor. Custom-Tooltips, die ausschließlich bei Maus-Hover sichtbar sind und keine ARIA-Attribute tragen, sind für Tastaturnutzer unsichtbar und damit nicht barrierefrei.
Beispiel aus der Praxis
Das WordPress-Administrations-Backend nutzt Tooltips intensiv. Im Gutenberg-Editor zeigen Icons in der Block-Werkzeugleiste beim Hover einen Tooltip mit dem Funktionsnamen an, etwa „Fett“, „Kursiv“ oder „Link einfügen“. Auch das klassische Backend nutzt Fragezeichen-Icons neben Formularfeldern als Tooltip-Auslöser, die beim Hover oder Klick Erklärungen zu den jeweiligen Einstellungen einblenden. Diese Tooltips sind Teil des WordPress-Core und bauen auf zugänglichem HTML mit aria-describedby-Verknüpfungen auf.
Häufiger Fehler
Ein häufiger Fehler bei der Implementierung eigener Tooltips in WordPress-Themes oder -Plugins ist das Weglassen der ARIA-Attribute. Wer einen Icon-Button nur per CSS mit einem Pseudo-Element-Tooltip versieht, liefert zwar sehenden Nutzern eine Erklärung, aber Screenreader und Tastaturnutzer erhalten keine Information. Ergänzen Sie bei jedem Custom-Tooltip das Attribut aria-label oder verknüpfen Sie das Element über aria-describedby mit einem beschreibenden Textknoten, der per CSS visuell verborgen, aber für Hilfstechnologien lesbar ist.