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 gehören 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 verständlich, ein Formularfeld mit unklarer Bezeichnung wird durch einen erklaerenden Tooltip zugaenglich.
Wann Tooltips sinnvoll sind
Gute Einsatzzwecke
- Icon-only-Buttons: Ein Tooltip erklärt die Funktion (z. B. Papierkorb-Icon mit Tooltip "Loeschen")
- Abgekuerzte Texte: Vollstaendiger Text bei abgeschnittenen Labels
- Formularfelder: Zusaetzliche Erklärung, warum ein Feld benötigt wird
- Deaktivierte Elemente: Erklärung, warum ein Button nicht klickbar ist
- Fachbegriffe: Kurze Definition bei Hover über einen Begriff
Wann Tooltips vermieden werden sollten
- Für essentielle Informationen, die jeder Nutzer braucht
- Für umfangreiche Inhalte (mehr als 1-2 Sätze)
- Für Inhalte mit Links oder interaktiven Elementen (dafuer: Popover)
- Als Ersatz für 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) für 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 Sätze
- 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-Geräte | Problematisch | Funktioniert | Funktioniert |
| ARIA-Rolle | tooltip | dialog | status |
Accessibility
Barrierefreie Tooltips sind technisch anspruchsvoll und erfordern sorgfaeltige ARIA-Implementierung:
ARIA-Attribute
- Das ausloesende Element benötigt
aria-describedbymit der ID des Tooltips - Der Tooltip selbst benötigt
role="tooltip" - Tooltips müssen per Tastatur erreichbar sein (Fokus auf das ausloesende Element)
- Die Escape-Taste muss den Tooltip schliessen koennen
Touch-Geräte
Da Hover auf Touch-Geraeten nicht verfügbar ist, müssen 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-Lösung über title-Attribute ist für 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.