Tooltip

Was ist ein Tooltip?

Ein Tooltip ist ein kurzer, kontextbezogener Hinweis in einer Benutzeroberfläche. Er erscheint typischerweise, wenn ein Nutzer ein Symbol oder Bedienelement mit Mauszeiger, Tastaturfokus oder Berührung aktiviert. Tooltips erklären unbekannte Funktionen, Abkürzungen oder Eingabefelder, ohne die Oberfläche dauerhaft mit zusätzlichem Text zu belasten.

Wie funktioniert ein Tooltip?

Ein Tooltip, auf Deutsch auch Kurzinfo genannt, ist einem konkreten Element wie einem Icon, Link, Button oder Formularfeld zugeordnet. Sobald ein definierter Auslöser eintritt, blendet die Oberfläche einen kurzen Text in unmittelbarer Nähe des Elements ein. Verlässt der Nutzer das Element oder schließt den Hinweis, verschwindet der Text wieder.

Auf Desktop-Geräten wird ein Tooltip häufig durch das Überfahren mit dem Mauszeiger ausgelöst. Eine zugängliche Umsetzung muss zusätzlich auf Tastaturfokus reagieren. Auf Touchscreens existiert kein dauerhaftes Hover-Signal. Dort braucht der Tooltip einen eindeutig bedienbaren Auslöser, etwa ein Informationssymbol, das sich antippen und wieder schließen lässt.

Hover: Der Mauszeiger befindet sich über dem zugeordneten Element.
Fokus: Das Element wurde über die Tastatur angesteuert.
Klick oder Berührung: Der Nutzer aktiviert ein Informationssymbol bewusst.
Automatischer Hinweis: Die Oberfläche erklärt ein neues oder ungewöhnliches Element einmalig.

Tooltip für UX und CRO

In der User Experience, kurz UX, reduziert ein Tooltip den Erklärungsbedarf direkt an der Stelle, an der eine Frage entsteht. Ein Informationssymbol neben einem Feld für die Umsatzsteuer-ID kann beispielsweise erklären, welches Format erwartet wird. Der Nutzer muss dafür weder eine Hilfeseite öffnen noch den aktuellen Prozess verlassen.

Für die Conversion-Rate-Optimierung, kurz CRO, eignet sich ein Tooltip vor allem bei Formularen, Konfiguratoren, Vergleichstabellen und Checkouts. Der Hinweis kann Unsicherheit abbauen, bevor sie zu einer fehlerhaften Eingabe oder einem Abbruch führt. Ein Tooltip ersetzt jedoch keine verständliche Beschriftung. Angaben wie Preis, Lieferumfang, Vertragsbedingung oder Pflichtfeldkennzeichnung müssen dauerhaft sichtbar bleiben.

Ein guter Tooltip beantwortet genau eine Frage. Neben einem Feld mit der Bezeichnung ‘Sicherheitscode’ kann er beispielsweise erklären, wo der Code auf der Karte steht. Eine vollständige Beschreibung des Bezahlvorgangs wäre an dieser Stelle zu umfangreich und gehört in den regulären Seiteninhalt.

Wann ist ein Tooltip sinnvoll?

Ein Tooltip ist sinnvoll, wenn ein Element ohne Zusatzinformation verständlich bedienbar bleibt, einzelne Nutzer aber eine kurze Erläuterung benötigen. Typische Anwendungsfälle sind wenig bekannte Icons, technische Abkürzungen, komplexe Kennzahlen und Eingabeformate. Der Hinweis sollte eine konkrete Wissenslücke schließen und keine Voraussetzung für die grundlegende Bedienung sein.

Ein Icon besitzt keine allgemein verständliche Bedeutung.
Eine Kennzahl benötigt eine kurze Definition oder Berechnungsgrundlage.
Ein Formularfeld verlangt ein bestimmtes Format.
Eine deaktivierte Funktion benötigt eine knappe Begründung.
Eine Diagrammachse zeigt Zusatzwerte zu einem Datenpunkt.

Ein Tooltip ist ungeeignet, wenn der Inhalt länger als wenige Sätze wird, interaktive Elemente enthält oder für eine Kaufentscheidung erforderlich ist. Umfangreiche Erklärungen gehören in einen aufklappbaren Bereich, einen Dialog oder direkt in den Seiteninhalt. Diese Einordnung gehört auch zu einer fundierten Usability-Optimierung.

Tooltip barrierefrei umsetzen

Ein Tooltip darf nicht ausschließlich auf Hover reagieren. Nutzer, die mit der Tabulatortaste navigieren, müssen den gleichen Inhalt über den Tastaturfokus erreichen können. Der Hinweis sollte geöffnet bleiben, solange sich Mauszeiger oder Fokus auf dem Auslöser beziehungsweise dem eingeblendeten Inhalt befinden.

Ein eingeblendeter Tooltip darf außerdem keine relevanten Bedienelemente verdecken. Lässt sich der Hinweis ohne Verschieben des Mauszeigers schließen, ist dafür üblicherweise die Escape-Taste vorgesehen. Im Quellcode kann eine Beziehung zwischen Auslöser und Beschreibung über aria-describedby hergestellt werden, damit unterstützende Technologien den Hinweis dem richtigen Element zuordnen.

Das HTML-Attribut title allein ist keine belastbare Tooltip-Lösung. Browser steuern Darstellung, Verzögerung und Bedienbarkeit weitgehend selbst. Auf Touchscreens und bei Tastaturnavigation ist der Inhalt häufig schwer oder gar nicht erreichbar. Verwende deshalb einen sichtbaren Auslöser und eine technisch verknüpfte Beschreibung.

Tooltip und verwandte Elemente

Der Unterschied zwischen Tooltip und Popover liegt vor allem in Umfang und Interaktion. Ein Tooltip enthält eine kurze Erklärung und normalerweise keine Links, Eingabefelder oder Buttons. Ein Popover kann mehrere Informationen und bedienbare Elemente aufnehmen und bleibt häufig geöffnet, bis der Nutzer es bewusst schließt.

Element	Typischer Inhalt	Auslöser	Interaktion im Inhalt
Tooltip	Kurzer Hinweis	Hover, Fokus oder Antippen	In der Regel nein
Popover	Erklärung oder Auswahl	Klick oder Antippen	Möglich
Dialog	Aufgabe oder umfangreiche Information	Bewusste Aktivierung	Ja
Formularhilfe	Dauerhafte Eingabehilfe	Ohne Auslöser sichtbar	Nein

Der Unterschied zwischen Tooltip und Formularhilfe betrifft die Sichtbarkeit. Eine Formularhilfe steht dauerhaft am Feld und eignet sich für Informationen, die jeder Nutzer vor der Eingabe kennen muss. Ein Tooltip bleibt ergänzenden Details vorbehalten. Diese Trennung sollte bereits bei der Konzeption eines nutzerorientierten Webdesigns festgelegt werden.

Tooltips für SEO, SEA und GEO

Ein Tooltip beeinflusst SEO nicht durch seine bloße Existenz. Der Nutzen entsteht über eine klarere Bedienung, verständlichere Formulare und besser strukturierte Nutzerwege. Zentrale Inhalte sollten trotzdem als regulärer Text im HTML stehen, damit Suchmaschinen und Nutzer die Information ohne Interaktion erfassen können. Weitere Ansatzpunkte bietet die Optimierung einer Website für Google.

Für SEA kann ein Tooltip auf der Landingpage Rückfragen zu Formularfeldern, Preisen oder Produktoptionen beantworten. Für GEO, also Generative Engine Optimization, gilt dieselbe Inhaltsregel wie für SEO: Definitionen, Leistungsmerkmale und kaufrelevante Fakten gehören in klar strukturierte, dauerhaft verfügbare Textabschnitte. Ein kurzer Hinweis ist eine Bedienhilfe und keine verlässliche Wissensquelle für Suchmaschinen oder KI-Systeme.

Tooltip messen und optimieren

Messbar ist ein Tooltip durch Ereignisse für Einblendung, Öffnung, Schließen, Feldeingabe, Fehlermeldung und Abschluss. Bei einem Formular vergleichst du beispielsweise die Fehlerquote und Abschlussrate vor und nach der Einführung des Hinweises. Ein A/B-Test trennt dabei eine Variante mit Tooltip von einer unveränderten Kontrollvariante. Verändert sich nur die Zahl der Öffnungen, aber weder Fehlerquote noch Abschlussrate, löst der Hinweis wahrscheinlich kein relevantes Nutzerproblem.

Ein sinnvoller Qualitätstest prüft den Tooltip mit Maus, Tastatur und Touchscreen. Zusätzlich sollte kontrolliert werden, ob der Hinweis bei vergrößerter Ansicht lesbar bleibt, andere Inhalte verdeckt und von einem Screenreader dem richtigen Element zugeordnet wird. Beobachtungen aus CRO-Projekten zeigen besonders häufig Probleme bei mobilen Formularen, wenn ein Desktop-Hover unverändert auf kleine Touchscreens übertragen wurde.

Häufige Fragen zu Tooltips

Wie lang sollte ein Tooltip sein?

Ein Tooltip sollte eine einzelne Frage in einem oder zwei kurzen Sätzen beantworten. Benötigt die Erklärung mehrere Absätze, Beispiele oder eine Auswahlmöglichkeit, eignet sich ein Popover oder ein regulärer Inhaltsbereich besser.

Funktioniert ein Tooltip auf dem Smartphone?

Ein Tooltip funktioniert auf dem Smartphone nur mit einem für Touchscreens geeigneten Auslöser. Ein sichtbares Informationssymbol kann durch Antippen geöffnet und durch erneutes Antippen, eine Schaltfläche oder eine Berührung außerhalb geschlossen werden.

Kann ein Tooltip Links enthalten?

Ein klassischer Tooltip sollte keine Links oder anderen interaktiven Elemente enthalten. Sobald Nutzer innerhalb des Hinweises navigieren oder eine Aktion ausführen sollen, ist ein Popover oder Dialog die passendere Komponente.

Was ist der Unterschied zwischen Tooltip und Mouseover?

Mouseover bezeichnet ein Ereignis, bei dem der Mauszeiger über ein Element bewegt wird. Ein Tooltip ist die daraufhin angezeigte Benutzeroberfläche. Tooltips können zusätzlich durch Tastaturfokus, Klick oder Berührung ausgelöst werden.

Sind Tooltips gut für Formulare?

Tooltips eignen sich für ergänzende Hinweise zu Formaten, Fachbegriffen oder selten benötigten Details. Pflichtangaben, Fehlermeldungen und Informationen, die jeder Nutzer benötigt, sollten direkt am Formularfeld sichtbar sein.

Ist ein Tooltip barrierefrei?

Ein Tooltip kann barrierefrei umgesetzt werden, wenn er per Maus und Tastatur erreichbar, ausreichend lange sichtbar und bei Bedarf schließbar ist. Die Beschreibung muss technisch mit dem auslösenden Element verknüpft sein und darf keine relevanten Inhalte verdecken.