Tooltip – Kontexthilfe und Erklärungstexte im UI-Design

Ein Tooltip ist ein kleines, nicht-modales Informations-Overlay, das bei Hover oder Tastaturfokus auf einem UI-Element erscheint und eine kurze Erklärung, Beschriftung oder Kontexthilfe anzeigt.

Rubrik: Mediendesign & Digitale Medien · Unterrubrik: UI-Komponenten · Niveau: Einsteiger Synonyme / Auch bekannt als: Infoblasen, Hover-Text, Hovercard, Floating Label, Beschriftungs-Overlay

Was ist ein Tooltip?

Tooltips gehören zur Kategorie der contextual help patterns – sie liefern Zusatzinformation genau dann, wenn ein Nutzer pausiert und nachfragt. Sie sind besonders wertvoll bei Icon-Only-Buttons (Was macht dieses Symbol?), bei Fachbegriffen in Formularen und bei Abkürzungen. Richtig eingesetzt ergänzen sie das Interface dezent ohne den Hauptinhalt zu überlagern.

Erklärung

Varianten

Simple/Plain Tooltip: Nur Text. Maximale Länge: 1–2 Sätze (ca. 60–80 Zeichen). Dunkler Hintergrund (meist fast schwarz), weißer Text. Kleine Schriftgröße (12–14 px).

Rich Tooltip / Popover: Enthält neben Text auch Icons, Links, Bilder oder Formatierung. Technisch kein klassischer Tooltip mehr, sondern ein Popover. Bleibt oft auch nach Verlassen des Trigger-Elements geöffnet (persistent). Kann fokussierbare Elemente enthalten.

Informational Tooltip: Erscheint an einem Fragezeichen-Icon (?) neben Formularfeldern oder Einstellungen. Erklärt den Zweck des Feldes oder liefert Beispiele.

Warning/Error Tooltip: Zeigt Validierungsfehler oder Warnungen direkt an dem Element, auf das sie sich beziehen. Oft mit gelbem oder rotem Farbcode.

Positionierung

Tooltips können in vier Richtungen positioniert werden: oben, unten, links, rechts. Die optimale Position vermeidet Überlappung mit dem Trigger und bleibt innerhalb des Viewports. Bei Tooltip oben ist der kleine Pfeil (Caret) unten am Tooltip, zeigt auf das Trigger-Element.

• Bevorzugt: Oben (über dem Element), wenn ausreichend Platz
• Fallback: Unten oder rechts, wenn oben kein Platz
• Viewport-Collision-Detection: JavaScript passt Position automatisch an, wenn Tooltip über den Rand gehen würde

Timing

• Show Delay: 300–500 ms nach Hover-Beginn. Verhindert ungewolltes Erscheinen beim Durchfahren des Interfaces.
• Hide Delay: 100–200 ms nach Verlassen des Triggers. Erlaubt langsames Bewegen zur Tooltip-Fläche (bei Rich Tooltips).
• Touch-Geräte: Standard-Tooltips funktionieren nicht auf Touch (kein Hover). Alternative: Tap-to-reveal oder dauerhafte Beschriftungen.

Anatomie

• Container: Kleiner gerundeter Rechteck-Frame, meist dunkel
• Text: Kurz, prägnant, keine langen Erklärungen
• Caret/Arrow: Kleines Dreieck zeigt auf das Trigger-Element
• Trigger: Das UI-Element, das den Tooltip auslöst

Accessibility (WCAG 2.1)

• role="tooltip" auf dem Tooltip-Container
• aria-describedby="tooltip-id" auf dem Trigger-Element verknüpft beides
• Tooltip muss bei Hover UND Tastaturfokus erscheinen (WCAG 1.4.13 – Content on Hover or Focus)
• Tooltip muss persistent sein: Bleibt sichtbar, wenn der Nutzer die Maus auf den Tooltip bewegt (für Rich Tooltips)
• Tooltip muss dismissible sein: Escape schließt ihn (ohne Fokusverlust)
• Tooltip-Text muss ausreichend Zeit zum Lesen haben (nicht zu kurz sichtbar)
• Tooltip-Inhalt darf keine einzige Informationsquelle für kritische Inhalte sein – Touch-Nutzer sehen ihn nicht
• Kontrastverhältnis Tooltip-Text/Hintergrund: mindestens 4,5:1

Beispiele

1. GitHub – Repository-Header-Icons: Die Aktions-Icons (Watch, Fork, Star) zeigen Tooltips mit Textbeschriftungen bei Hover. Das Tooltip erscheint mit leichter Verzögerung (ca. 400 ms), ist kurz und prägnant.
2. Google Docs – Toolbar: Formatting-Icons (Fett, Kursiv, Unterstreichen) zeigen Tooltips mit dem Namen der Aktion und dem Tastaturkürzel in Klammern – z. B. „Fett (Strg+B)". Exzellentes UX-Pattern für Lerneffekt.
3. Mobile vs. Desktop: Auf Touch-Devices gibt es kein Hover. Tooltip-Inhalte müssen daher anders zugänglich gemacht werden: durch sichtbare Labels, ein „?"-Icon das bei Tap ein Modal/Popover öffnet, oder inline Help Text unterhalb des Elements.
4. Accessibility Best Practice: Die ARIA-Implementation nach WAI-APG zeigt Tooltip bei mouseover UND focus, schließt bei mouseout UND blur sowie bei Escape. Das Tooltip-Element ist via aria-describedby korrekt verknüpft.
5. Häufiger Fehler: Tooltip als einzige Beschriftung für kritische Informationen nutzen, z. B. Formular-Fehler nur als Tooltip anzeigen (Touch-Nutzer sehen sie nicht). Oder: Tooltips mit zu langen Texten überladen – sobald mehr als 2 Sätze nötig sind, ist ein Popover oder ein Modal besser.

In der Praxis

Figma: Tooltip als Komponente mit Position-Variant (Top, Bottom, Left, Right) und Caret-Position-Variant. Auto Layout für den Text-Container. In Prototypen: Tooltip wird beim Hover des Trigger-Elements als Overlay eingeblendet. Für Rich Tooltips: eigene Komponente mit anklickbaren Elementen.

HTML/CSS-Grundstruktur: ```html <!-- Einfacher Tooltip via ARIA --> <button type="button" aria-describedby="copy-tooltip" class="icon-btn" > <svg aria-hidden="true"><!-- Copy Icon --></svg> <span class="visually-hidden">Kopieren</span> </button>

<div role="tooltip" id="copy-tooltip" > In Zwischenablage kopieren (Strg+C) </div>

<!-- CSS: Tooltip initial versteckt, bei :hover/:focus-within sichtbar --> <style> [role="tooltip"] { position: absolute; background: #1a1a1a; color: white; padding: 6px 10px; border-radius: 4px; font-size: 13px; pointer-events: none; opacity: 0; transition: opacity 0.2s; } .icon-btn:hover [role="tooltip"], .icon-btn:focus-within [role="tooltip"] { opacity: 1; } </style> ```

Vergleich & Abgrenzung

Häufige Fragen (FAQ)

Warum soll der Tooltip auch bei Tastaturfokus erscheinen? WCAG 1.4.13 „Content on Hover or Focus" verlangt ausdrücklich, dass Inhalte die bei Hover erscheinen auch bei Tastaturfokus erscheinen. Viele Nutzer navigieren per Tastatur (motorische Einschränkungen) – sie erreichen Hover-States nicht. Wenn ein Icon-Button nur über Tooltip beschriftet ist, müssen Tastaturnutzer denselben Kontext erhalten.

Ab wann sollte ich statt eines Tooltips ein Popover verwenden? Sobald der Tooltip-Inhalt mehr als 2 kurze Sätze enthält, Links oder Buttons enthält, oder länger als 5 Sekunden zum Lesen braucht. Popovers bleiben geöffnet, sind fokussierbar, enthalten strukturierten Inhalt und können per Klick geschlossen werden. Sie sind die barrierefreie Wahl für komplexere Kontexthilfe.

Verwandte Einträge

• Modal Dialog
• Toast Notification
• Button-Typen
• Micro-Interactions

Weiterführend

• Nielsen Norman Group – „Tooltip Guidelines": nngroup.com/articles/tooltip-guidelines
• Material Design 3 – Tooltips: m3.material.io/components/tooltips
• Apple Human Interface Guidelines – Help Tags: developer.apple.com/design/human-interface-guidelines
• WCAG 2.1 – SC 1.4.13 Content on Hover or Focus: w3.org/WAI/WCAG21/Understanding/content-on-hover-or-focus