Ein Tooltip ist ein schwebendes Textfeld, das kontextuelle Informationen zu einem Interface-Element einblendet, wenn der Nutzer mit der Maus darueber faehrt oder es per Tastatur fokussiert. Tooltips sind ein zentrales Element des UI-Designs und gehoeren zur Familie der Progressive-Disclosure-Muster.
Tooltips dienen einem klaren Zweck: Sie liefern ergaenzende Informationen, ohne das Interface zu ueberladen. Ein Icon ohne Label wird durch einen Tooltip verstaendlich, ein Formularfeld mit unklarer Bezeichnung wird durch einen erklaerenden Tooltip zugaenglich.
Wann Tooltips sinnvoll sind
Gute Einsatzzwecke
- Icon-only-Buttons: Ein Tooltip erklaert die Funktion (z. B. Papierkorb-Icon mit Tooltip "Loeschen")
- Abgekuerzte Texte: Vollstaendiger Text bei abgeschnittenen Labels
- Formularfelder: Zusaetzliche Erklaerung, warum ein Feld benoetigt wird
- Deaktivierte Elemente: Erklaerung, warum ein Button nicht klickbar ist
- Fachbegriffe: Kurze Definition bei Hover ueber einen Begriff
Wann Tooltips vermieden werden sollten
- Fuer essentielle Informationen, die jeder Nutzer braucht
- Fuer umfangreiche Inhalte (mehr als 1-2 Saetze)
- Fuer Inhalte mit Links oder interaktiven Elementen (dafuer: Popover)
- Als Ersatz fuer klare Labels und Microcopy
- Auf mobilen Geraeten als primaeres Informationsmittel
Designregeln
Positionierung
| Position | Wann verwenden |
|---|---|
| Oben | Standard, wenn Platz vorhanden |
| Unten | Wenn das Element am oberen Bildschirmrand liegt |
| Links/Rechts | Bei horizontalen Layouts oder schmalen Spalten |
| Automatisch | Idealfall: Position passt sich dem verfuegbaren Platz an |
Der Tooltip sollte das ausloesende Element nicht verdecken und moeglichst nah daran positioniert sein. Ein kleiner Pfeil (Caret) zeigt die Zuordnung.
Timing
- Verzoegerung beim Einblenden: 200-500ms nach Hover-Beginn (verhindert versehentliches Ausloesen)
- Sofort sichtbar bei Fokus: Per Tastatur fokussierte Elemente zeigen den Tooltip ohne Verzoegerung
- Ausblenden: Sofort oder mit 100ms Fade-out nach Verlassen des Elements
- Warm-up-Effekt: Nach dem ersten Tooltip einer Session koennen folgende Tooltips schneller erscheinen
Visuelle Gestaltung
- Hintergrund: Dunkel auf hellem Interface (oder umgekehrt) fuer maximalen Kontrast
- Schriftgroesse: Etwas kleiner als der Fliesstext, aber mindestens 12px
- Padding: 4-8px horizontal, 4-6px vertikal
- Max. Breite: 200-300px, laengerer Text umbricht
- Border-Radius: Konsistent mit dem Design System
Inhalt
Gute Tooltip-Texte sind:
- Kurz: 1-2 Zeilen, maximal 3 kurze Saetze
- Hilfreich: Ergaenzende Information, keine Wiederholung des Labels
- Aktiv formuliert: "Datei loeschen" statt "Wird zum Loeschen der Datei verwendet"
- Ohne Formatierung: Kein Fettdruck, keine Links, keine Bilder
Tooltip vs. Popover vs. Toggletip
| Merkmal | Tooltip | Popover | Toggletip |
|---|---|---|---|
| Ausloeser | Hover / Fokus | Klick | Klick |
| Inhalt | Nur Text | Text, Bilder, Links | Nur Text |
| Interaktivitaet | Nicht interaktiv | Interaktiv | Nicht interaktiv |
| Schliessen | Automatisch bei Hover-End | Manuell (X oder Klick) | Klick oder Fokus-Verlust |
| Touch-Geraete | Problematisch | Funktioniert | Funktioniert |
| ARIA-Rolle | tooltip | dialog | status |
Accessibility
Barrierefreie Tooltips sind technisch anspruchsvoll und erfordern sorgfaeltige ARIA-Implementierung:
ARIA-Attribute
- Das ausloesende Element benoetigt
aria-describedbymit der ID des Tooltips - Der Tooltip selbst benoetigt
role="tooltip" - Tooltips muessen per Tastatur erreichbar sein (Fokus auf das ausloesende Element)
- Die Escape-Taste muss den Tooltip schliessen koennen
Touch-Geraete
Da Hover auf Touch-Geraeten nicht verfuegbar ist, muessen Alternativen bereitgestellt werden:
- Info-Icon (i): Oeffnet den Tooltip per Tap
- Inline-Text: Die Information wird direkt unter dem Element angezeigt
- Toggletip: Per Tap oeffnen und schliessen (statt Hover)
Wichtige Informationen duerfen nie ausschliesslich in Tooltips stehen — das widerspricht den Prinzipien der Barrierefreiheit. Ein Tooltip ergaenzt, er ersetzt nicht.
Tooltips in der Webentwicklung
In modernen React-Anwendungen bieten Bibliotheken wie Radix UI, Floating UI (ehemals Popper.js) und shadcn/ui fertige Tooltip-Komponenten mit automatischer Positionierung, Collision Detection und Accessibility-Features. Die native CSS-Loesung ueber title-Attribute ist fuer professionelle Anwendungen nicht ausreichend, da Styling und Timing nicht kontrollierbar sind.
Ein durchdachtes Tooltip-System ist ein unscheinbarer aber wirkungsvoller Bestandteil des Interaction Designs — es macht Interfaces selbsterklaerend, ohne sie zu ueberfrachten.