Tooltip
Was ist ein Tooltip?
Ein Tooltip ist ein kurzer Hinweistext, der zusätzliche Informationen zu einem Bedienelement, Symbol oder Begriff liefert. Er erscheint typischerweise beim Bewegen des Mauszeigers über das Element oder beim Tastaturfokus. Tooltips unterstützen die Bedienung digitaler Oberflächen, dürfen jedoch keine Informationen enthalten, die ausschließlich auf diesem Weg zugänglich sind.
Was bedeutet Tooltip?
Ein Tooltip ergänzt eine Benutzeroberfläche um eine kompakte Erklärung, ohne dauerhaft Platz auf der Seite zu beanspruchen. Die deutsche Entsprechung lautet sinngemäß „Hinweistext“ oder „Kurzinfo“. Häufig erläutert der Hinweis die Funktion eines Icons, die Bedeutung einer Kennzahl oder die erwartete Eingabe in einem Formularfeld.
Typische Einsatzbereiche sind Dashboards, Onlineshops, Formulare und Software-Anwendungen. Ein Fragezeichen neben einem Fachbegriff kann beispielsweise beim Darüberfahren erklären, wie eine Kennzahl berechnet wird. Bei einem Warenkorb-Icon kann der Hinweis dagegen die Beschriftung „Warenkorb öffnen“ anzeigen.
Wie funktioniert ein Tooltip?
Ein Tooltip ist zunächst ausgeblendet und wird durch eine definierte Nutzeraktion eingeblendet. Auf einem Desktop-Gerät erfolgt die Aktivierung häufig durch Hover, also das Positionieren des Mauszeigers über einem Element. Eine zugängliche Umsetzung reagiert zusätzlich auf den Tastaturfokus. Auf Touchscreens braucht die Funktion eine geeignete Alternative, etwa Antippen oder eine dauerhaft sichtbare Erklärung.
Technische Umsetzung im HTML
Die einfachste technische Variante nutzt das HTML-Attribut title. Browser zeigen dessen Inhalt meist als nativen Hinweis an. Diese Lösung lässt sich jedoch nur begrenzt gestalten und verhält sich je nach Browser, Gerät und Eingabemethode unterschiedlich. Für zentrale Erklärungen ist das Attribut deshalb keine verlässliche alleinige Lösung.
Individuelle Tooltips werden meist mit HTML, CSS und JavaScript umgesetzt. Das auslösende Element verweist dabei über aria-describedby auf den erklärenden Inhalt. Der Hinweis kann zusätzlich die semantische Rolle role="tooltip" erhalten. Der Tastaturfokus bleibt auf dem Auslöser, da der eingeblendete Text selbst normalerweise keine interaktiven Elemente enthält.
Tooltip und Barrierefreiheit
Ein zugänglicher Tooltip muss mit Maus und Tastatur erreichbar sein. Er sollte sich schließen lassen, beim Bewegen des Mauszeigers über den eingeblendeten Inhalt geöffnet bleiben und andere Seitenelemente möglichst nicht verdecken. Weitere Anforderungen an verständliche und bedienbare Oberflächen zeigt die Checkliste für eine barrierefreie Website.
Wichtige Informationen sollten zusätzlich als sichtbarer Text verfügbar sein. Das betrifft insbesondere Fehlermeldungen, Pflichtfeldhinweise, Preise, rechtliche Angaben und wesentliche Produkteigenschaften. Nutzer von Touchscreens, Sprachsteuerung oder Screenreadern können reine Hover-Inhalte sonst nur eingeschränkt oder gar nicht erreichen.
Tooltip, Popover und Modal
Der Unterschied zwischen Tooltip und Popover liegt vor allem im Umfang und in der Interaktion. Ein Tooltip enthält eine kurze ergänzende Erklärung. Ein Popover kann umfangreichere Inhalte und anklickbare Elemente aufnehmen. Ein Modal öffnet eine eigene Dialogebene und verlangt häufig eine Handlung, bevor der Nutzer zur Seite zurückkehrt.
| Element | Typischer Inhalt | Interaktion |
|---|---|---|
| Tooltip | Kurzer ergänzender Hinweis | Hover, Fokus oder Antippen |
| Popover | Erklärung, Links oder Aktionen | Aktives Öffnen und Schließen |
| Modal | Formular, Bestätigung oder umfangreicher Dialog | Unterbricht vorübergehend die Seitennutzung |
| HTML-Title-Attribut | Einfacher Browserhinweis | Vom Browser gesteuert |
Nutzen für UX und Conversion
Gut platzierte Kurzinfos reduzieren Verständnisfragen direkt an der Stelle, an der sie entstehen. In einem Formular kann ein Hinweis beispielsweise das erforderliche Datumsformat erklären. In einem Onlineshop kann er eine Größenangabe erläutern. Dadurch treffen Nutzer fundiertere Entscheidungen und brechen einen Vorgang seltener wegen unklarer Bezeichnungen ab.
Der Nutzen lässt sich über Kennzahlen wie Formularabbrüche, Fehlereingaben, Klickpfade und Conversion-Rate prüfen. Ein A/B-Test kann vergleichen, ob eine verständliche Kurzinfo die Nutzung eines erklärungsbedürftigen Feldes verbessert. Bei der Optimierung von UX und Usability zählt deshalb die messbare Wirkung auf das Nutzerverhalten, nicht die bloße Anzahl eingebauter Hilfetexte.
Relevanz für SEO, SEA und GEO
Ein Tooltip ist kein direkter Ranking-Faktor. Er kann SEO jedoch indirekt unterstützen, wenn verständlichere Bedienoberflächen Nutzern helfen, Inhalte zu erfassen und Aufgaben abzuschließen. Technische Qualität, mobile Bedienbarkeit und klare Seitenstrukturen gehören zu den Grundlagen einer sauber gemanagten technischen SEO.
Auf SEA-Landingpages können kurze Hilfetexte erklärungsbedürftige Formularfelder oder Angebotsdetails verständlicher machen. Das kann Fehlbedienungen reduzieren und die Conversion-Rate stabilisieren. Der Hinweis sollte dabei die Anzeige und Zielseite ergänzen, zentrale Leistungsmerkmale jedoch nicht ausschließlich verstecken.
Für GEO, also Generative Engine Optimization, gilt ein ähnlicher Grundsatz: Inhalte, die KI-Systeme verstehen und zitieren sollen, gehören in den sichtbaren Haupttext. Informationen, die erst durch eine Nutzeraktion oder JavaScript erscheinen, können bei der automatisierten Verarbeitung weniger zuverlässig erfasst werden. Definitionen, Produktvorteile und Antworten auf häufige Fragen sollten daher eigenständig im Seiteninhalt stehen.
Tooltips sinnvoll gestalten
Eine gute Kurzinfo beantwortet genau eine Frage und bleibt sprachlich knapp. Der Text sollte den Auslöser konkret erläutern, statt dessen Beschriftung nur zu wiederholen. Bei erklärungsbedürftigen Websites ist außerdem eine konsistente Gestaltung sinnvoll, damit Nutzer Informationssymbole und ihr Verhalten schnell erkennen.
In Website-Projekten zeigt sich häufig, dass ein dauerhaft sichtbarer Hilfetext besser funktioniert, wenn viele Nutzer dieselbe Erklärung benötigen. Tooltips eignen sich vor allem für ergänzende Details, während eine klare Informationsarchitektur bereits bei der SEO-orientierten Website-Entwicklung angelegt werden sollte.
Wenn du prüfen möchtest, wie Nutzerführung, Technik und Inhalte deiner Website zusammenspielen, kannst du einen unverbindlichen Potenzialcheck anfragen.
Häufige Fragen zu Tooltips
Wie lange sollte ein Tooltip sein?
Ein Tooltip sollte möglichst kurz bleiben und eine konkrete Frage beantworten. Benötigt die Erklärung mehrere Absätze, Links oder Handlungsschritte, eignet sich ein Popover oder ein sichtbarer Hilfebereich besser.
Funktionieren Tooltips auf dem Smartphone?
Auf Smartphones gibt es keinen klassischen Hover-Zustand. Der Hinweis muss deshalb durch Antippen, Tastaturfokus bei externen Eingabegeräten oder eine sichtbare mobile Alternative erreichbar sein.
Kann ein Tooltip Links enthalten?
Ein klassischer Tooltip sollte keine Links oder Schaltflächen enthalten. Für interaktive Inhalte ist ein Popover geeigneter, weil es gezielt geöffnet wird und Tastaturfokus sowie Bedienung kontrolliert unterstützt.
Ist das HTML-Title-Attribut ein Tooltip?
Das Title-Attribut erzeugt in vielen Browsern einen einfachen nativen Hinweis. Es bietet jedoch wenig Kontrolle über Gestaltung, Einblendzeit und Bedienbarkeit und ersetzt keine vollständig zugängliche Umsetzung.
Sind Tooltips für SEO relevant?
Tooltips beeinflussen Rankings nicht direkt. Sie können die Nutzerführung verbessern, sollten aber keine zentralen Inhalte enthalten, die Suchmaschinen und KI-Systeme zuverlässig verstehen und einordnen müssen.
Wann sollte man keinen Tooltip verwenden?
Ein Tooltip ist ungeeignet, wenn die Information für eine Entscheidung erforderlich ist, dauerhaft sichtbar bleiben muss oder eine Nutzeraktion enthält. In diesen Fällen sind sichtbarer Text, ein Popover oder ein Dialogfenster meist geeigneter.
Sie haben noch Fragen?
