Tooltips sind kleine Textüberlagerungen, die beim Hover über oder Fokus auf ein Interface-Element erscheinen und kontextuelle Information liefern, ohne den Nutzer zu einem anderen Ort zu führen.
Rubrik: Mediendesign & Digitale Medien · Unterrubrik: UX Writing & Content Design · Niveau: Fortgeschritten Synonyme / Auch bekannt als: Hover-Texte, Kontexthilfe, Infoblasen, Help Text, Beschriftungshilfen
Was sind Tooltips und Hilfetexte?
Tooltips sind die diskreteste Form kontextueller Hilfe in digitalen Interfaces: Sie erscheinen genau dann, wenn ein Nutzer ein Element fokussiert oder mit der Maus darüber fährt, und verschwinden wieder, sobald die Interaktion endet. Damit unterscheiden sie sich fundamental von anderen Hilfeformaten wie modalen Dialogen oder Hilfe-Seiten, die den Nutzer aus seinem Kontext herausreißen.
Hilfetexte sind das statische Pendant: Erklärende Texte, die permanent unter einem Eingabefeld, neben einer Einstellung oder in einem Infobereich sichtbar sind. Sie erscheinen nicht auf Interaktion, sondern sind immer da.
Beide Elemente erfüllen dieselbe Grundfunktion: Sie liefern Information genau dort und genau dann, wo der Nutzer sie braucht – kontextuell, knapp, klar.
Erklärung
Wann Tooltips einsetzen?
Tooltips eignen sich für:
- Ikonische Buttons ohne Label: Wenn ein Icon allein steht (z. B. ein Zahnrad-Icon), erklärt der Tooltip die Funktion.
- Abkürzungen und Fachbegriffe: Nicht alle Nutzer kennen alle Begriffe. Ein Tooltip kann schnell definieren.
- Einschränkungen und Bedingungen: Warum ist ein Button deaktiviert? Ein Tooltip erklärt es.
- Zusatzerklärungen in Formularen: Warum wird eine bestimmte Information abgefragt?
Tooltips eignen sich NICHT für:
- Kritische Informationen, die nicht verpasst werden dürfen (z. B. Datenschutzhinweise)
- Lange Erklärungen (mehr als 2–3 Sätze)
- Mobile Touchscreens (kein Hover-Zustand vorhanden)
Wann Hilfetexte einsetzen?
Statische Hilfetexte (Help Text) sind besser geeignet als Tooltips, wenn:
- Die Information wichtig genug ist, um immer sichtbar zu sein
- Es sich um mobile Interfaces handelt
- Barrierefreiheit Priorität hat (Tooltips sind für Screenreader-Nutzer oft problematisch)
- Die Erklärung ein Pflichtfeld betrifft
Schreibprinzipien für Tooltips
Knapp: Tooltips sollten maximal 2–3 kurze Sätze umfassen. Idealerweise reicht ein Satz.
Informativ, nicht redundant: Ein Tooltip, der nur wiederholt, was bereits im Label steht, ist nutzlos. Er muss echten Mehrwert liefern.
Aktiv und direkt: „Legt fest, wie lange Sitzungen aktiv bleiben" ist besser als „Einstellung für die Sitzungsdauer".
Keine Anleitungen für Selbstverständliches: Tooltips auf offensichtliche Elemente (z. B. „Suchen"-Icon mit Tooltip „Suchen") sind unnötiges Rauschen.
Schreibprinzipien für Hilfetexte
Kontext geben: Warum wird diese Information gebraucht? Was passiert, wenn sie falsch ausgefüllt wird?
Format der Eingabe erklären: „Bitte im Format TT.MM.JJJJ eingeben" oder „Nur Zahlen, keine Sonderzeichen."
Motivierend oder beruhigend: Besonders bei sensiblen Daten: „Wir verwenden deine Telefonnummer nur zur Kontowiederherstellung."
Beispiele
Tooltips
Deaktivierter Button:
„Du kannst dieses Projekt erst archivieren, wenn alle offenen Aufgaben abgeschlossen sind."
Icon ohne Label (Einstellungen-Zahnrad):
„Kontoeinstellungen – Passwort, Benachrichtigungen, Datenschutz"
Fachbegriff mit Tooltip:
„2FA: Zwei-Faktor-Authentifizierung – eine zusätzliche Sicherheitsebene beim Anmelden."
Hilfetexte in Formularen
Unter einem Passwort-Feld:
„Mindestens 8 Zeichen, davon ein Großbuchstabe und eine Zahl."
Unter einem Datumsfeld:
„Format: TT.MM.JJJJ. Beispiel: 15.03.1990."
Unter einem IBAN-Feld:
„Deine IBAN findest du auf deinem Kontoauszug oder im Online-Banking."
In der Praxis
UX Writer müssen in der Praxis zwei Fragen beantworten: Ist ein Tooltip/Hilfetext nötig? Und wenn ja: Was steht drin?
Wenn ein Interface so viele Tooltips benötigt, dass es schwer zu navigieren ist, ist das oft ein Zeichen, dass das Interface selbst neu gestaltet werden sollte. Tooltips sind eine Lösung für Grenzfälle, keine Kompensation für schlechtes Design.
Für Barrierefreiheit müssen Tooltips korrekt implementiert sein (ARIA-describedby, Tastaturzugänglichkeit). UX Writer arbeiten dafür eng mit Entwicklerinnen zusammen.
In Design-Systemen wie Google Material Design, IBM Carbon oder Shopify Polaris sind Tooltip-Regeln in den Komponent-Guidelines festgehalten. UX Writer sollten diese Systeme kennen und konsistent damit arbeiten.
Vergleich & Abgrenzung
Tooltips vs. [Onboarding-Texte und Willkommens-Flows](/wiki/mediendesign-digitale-medien/ux-writing/onboarding-texte/): Onboarding-Texte führen einmalig durch eine Einführungssequenz; Tooltips liefern dauerhaft kontextuelle Hilfe bei Bedarf.
Tooltip vs. Popover: Popovers sind größere, interaktive Overlays, die durch Klick ausgelöst werden; Tooltips sind kleiner, read-only und werden durch Hover ausgelöst.
Tooltip vs. Hilfe-Seite: Hilfe-Seiten sind ausführliche Dokumente; Tooltips sind die Destillation auf 1–2 Sätze.
Häufige Fragen (FAQ)
Sollten Tooltips auf mobilen Geräten vorhanden sein? Nicht als Hover-Tooltips (da kein Hover existiert). Stattdessen: statische Hilfetexte verwenden oder Info-Icons, die bei Antippen ein kleines Overlay öffnen.
Darf ich in Tooltips Markdown oder Formatierungen verwenden? Abhängig von der technischen Implementierung. In den meisten Design-Systemen sind Tooltips nur für Plain Text gedacht; für formatierte Inhalte gibt es Popovers oder andere Elemente.
Wie teste ich, ob mein Tooltip verständlich ist? Kurzer Nutzertest: Zeige nur den Tooltip (ohne visuellen Kontext) und frage, was der Nutzer darunter versteht. Wenn die Erklärung klar ist, ist der Tooltip gut.
Verwandte Einträge
- Microcopy: Kleine Texte, große Wirkung
- Formulare UX: Labels, Platzhalter, Fehlermeldungen
- Onboarding-Texte und Willkommens-Flows
- UX Writing: Schreiben für Interfaces
- Plain Language: Verständlich schreiben
Weiterführend
- Google Material Design: „Tooltips". m3.material.io (Stand: 2024).
- IBM Carbon Design System: „Tooltip". carbondesignsystem.com (Stand: 2024).
- WAI-ARIA Authoring Practices: „Tooltip Pattern". w3.org (Stand: 2024).
- Nielsen Norman Group: „Tooltip Guidelines". www.nngroup.com (Stand: 2023).
- Shostack, Lynn (2021): Inclusive Components. Smashing Magazine.
