Sie haben heute mit ziemlicher Sicherheit schon einen Tooltip benutzt, ohne darüber nachzudenken: Sie sind mit der Maus über ein Icon gefahren, das Sie nicht kannten, und ein winziges Label hat Ihnen gesagt, was es ist. Dieses kleine Label ist ein Tooltip, und es gehört zu den ältesten und nützlichsten Mustern im Interface-Design.
Doch der Begriff ist längst über dieses ursprüngliche Hover-Label hinausgewachsen. In moderner Software erledigen Tooltips alles Mögliche, vom Erklären eines unbeschrifteten Buttons bis zum Begleiten brandneuer Nutzer durch ihren ersten Workflow. Gut eingesetzt, sind sie die unaufdringlichste und hilfreichste Form der Anleitung in Ihrem Produkt. Schlecht eingesetzt, sind sie Rauschen, das Nutzer zu ignorieren lernen.
Dieser Leitfaden erklärt genau, was ein Tooltip ist, woher der Begriff kommt, welche Arten von Tooltips Ihnen begegnen, wie sie sich von Modals und Popovers unterscheiden, welche UX-Regeln gute von schlechten Tooltips trennen und wie Sie Tooltips in Ihre eigene App einbauen, ohne Ihre Codebasis anzufassen.
Tooltip: Definition
Ein Tooltip ist eine kleine kontextbezogene Nachricht, die neben einem bestimmten Element einer Benutzeroberfläche erscheint (einem Button, einem Icon, einem Eingabefeld oder einem Menüpunkt), um zu erklären, was dieses Element tut, oder um den Nutzer zu einer Aktion zu bewegen. Ein Tooltip ist an dem Element, das er beschreibt, verankert und bleibt leichtgewichtig: Er liefert eine kurze Hilfe genau dort und dann, wo sie gebraucht wird, ohne den Bildschirm zu übernehmen.
Das Wichtigste in Kürze
- Ein Tooltip ist verankert, kontextbezogen und klein. Er zeigt auf ein echtes Element und erklärt es in ein oder zwei Zeilen. Genau diese Nähe macht ihn aus.
- Die Bedeutung hat sich erweitert. Ursprünglich ein Hover-Label an einem Werkzeug-Icon, umfasst „Tooltip“ heute Hover-, Klick-, Fokus- und automatisch angezeigte Onboarding-Tooltips.
- Es gibt mehrere klar unterscheidbare Arten. Hover-, Klick-, Hotspot-, geführte Onboarding- und maskierte Tooltips eignen sich jeweils für eine andere Aufgabe und ein anderes Maß an Druck.
- Tooltips sind keine Modals oder Popovers. Tooltips sind für schnelle Hinweise da, Popovers enthalten reichhaltigere Inhalte, Modals unterbrechen alles.
- Gute Tooltip-UX ist kontextbezogen und sparsam. Verstecken Sie wichtige Informationen nie hinter einem Hover, und lassen Sie nie alle Tooltips auf einmal erscheinen.
- Sie brauchen keinen Code. Mit No-Code-Tools wie Kompassify verankern Sie einen Tooltip an einem beliebigen Element und veröffentlichen ihn direkt aus einem Dashboard.
Was ist ein Tooltip?
Ein Tooltip ist eine kleine kontextbezogene Nachricht, die an ein bestimmtes Element einer Oberfläche geknüpft ist (einen Button, ein Eingabefeld, einen Menüpunkt oder ein Icon), um zu erklären, was es tut, oder den Nutzer zu einer Aktion zu bewegen. Das entscheidende Merkmal ist die Verankerung: Ein Tooltip zeigt auf einen echten Teil der UI, statt mitten auf dem Bildschirm zu schweben. Die Erklärung steht also direkt neben dem, was sie erklärt.
Genau diese Nähe macht Tooltips so wirkungsvoll. Erscheint die Hilfe direkt neben dem betreffenden Element, muss der Nutzer eine Anweisung nicht erst einer Stelle auf der Seite zuordnen: Der Tooltip hat das bereits für ihn erledigt. Ein Tooltip beantwortet „Was ist das?“ oder „Was mache ich hier?“ genau an der Stelle, an der die Frage aufkommt.
Die Bestandteile eines Tooltips: ein Anker-Element, ein Zeigerpfeil, eine kurze Überschrift und ein kurzer Text, ein Schrittzähler sowie klare Möglichkeiten, zu handeln oder zu schließen.
Tooltips sind bewusst klein und unverbindlich. Anders als ein Modal, das den Bildschirm übernimmt und alles anhält, bis es geschlossen wird, lässt ein Tooltip den Rest des Produkts sichtbar und nutzbar. Damit ist er das natürliche Werkzeug für leichtgewichtige Anleitung im Kontext: eine Funktion hervorheben, ein unbekanntes Bedienelement erklären oder jemanden sanft zum nächsten Schritt bewegen, ohne ihn aus seinem Arbeitsfluss zu reißen.
Der Aufbau eines Tooltips: ein Ankerpfeil auf ein echtes Element, eine kurze Überschrift und Nachricht, ein Schrittzähler und ein klarer Weg zum nächsten Schritt.
Was bedeutet das Wort „Tooltip“?
Der Begriff stammt aus der frühen grafischen Software. Fuhr man mit dem Mauszeiger über ein kleines Werkzeug-Icon in einer Werkzeugleiste (den Pinsel, den Radiergummi, das Zuschneide-Werkzeug), erschien ein winziges Label mit dem Namen dieses Werkzeugs. Es war ganz wörtlich ein „Tipp“ (englisch tip) zum „Werkzeug“ (englisch tool), und so entstand der Tooltip.
Jahrelang war dieses per Hover eingeblendete Label die gesamte Bedeutung des Wortes. Doch als Software ins Web wanderte und Produkte komplexer wurden, dehnte sich das Muster auf eine viel größere Familie kleiner, verankerter Nachrichten aus. Heute bezeichnet „Tooltip“ jede kompakte Nachricht, die an ein UI-Element gebunden ist, egal ob sie durch Hover, durch Fokus per Tastatur oder durch einen Klick ausgelöst oder automatisch als ein Schritt in einem Onboarding-Ablauf angezeigt wird.
Wenn heute also jemand „Tooltip“ sagt, kann ein klassisches Hover-Label an einem Icon gemeint sein oder eine geführte In-App-Nachricht, die einen neuen Nutzer durch eine Funktion begleitet. Die Grundidee ist dieselbe, eine kurze Erklärung, die an etwas auf dem Bildschirm verankert ist, aber Auslöser und Absicht haben sich stark erweitert.
Arten von Tooltips
Nicht alle Tooltips verhalten sich gleich. Was sich von einem zum nächsten ändert, ist die Art des Auslösers, wie viel Aufmerksamkeit er beansprucht und welche Aufgabe er erfüllt. Hier sind die wichtigsten Arten, denen Sie begegnen werden.
Ein Hotspot, eine Art von Tooltip: ein pulsierendes Signal, das per Klick einen Tooltip öffnet, ideal für entdeckbare Hilfe ohne Druck.
1. Hover-Tooltip
Der Klassiker. Der Nutzer bewegt den Mauszeiger über ein Element, und ein kleines Label erscheint. Bewegt er ihn weg, verschwindet es. Hover-Tooltips eignen sich perfekt, um Buttons zu benennen, die nur aus einem Icon bestehen, oder um eine optionale Erklärung in einer Zeile anzubieten. Ihre Schwäche: Auf Touchscreens gibt es kein Hover, und sie lassen sich leicht komplett übersehen. Deshalb sollten sie nie Informationen enthalten, die der Nutzer wirklich braucht, um eine Aufgabe abzuschließen.
2. Klick- (oder Fokus-)Tooltip
Statt bei Hover zu erscheinen, öffnet sich dieser Tooltip, wenn der Nutzer auf ein Ziel klickt, oft ein kleines „?“- oder Info-Icon, und er bleibt geöffnet, bis der Nutzer ihn schließt oder weitergeht. Weil er bewusst ausgelöst wird, funktioniert er auf Touch-Geräten und kann etwas mehr Text aufnehmen. Er passt gut für Hilfe nach dem Motto „Was bedeutet dieses Feld?“ neben einem Formularfeld oder einer Einstellung.
3. Hotspot-Tooltip
Ein Hotspot ist ein kleiner, sanft pulsierender Punkt oder ein Signal neben einer Funktion. Er sagt selbst nichts, sondern lädt nur zum Klicken ein, und der Tooltip öffnet sich, sobald der Nutzer interagiert. Das ist das Muster mit dem geringsten Druck: Es lenkt den Blick durch dezente Bewegung, ohne jemanden zu unterbrechen, und ist damit ideal für optionale, entdeckbare Hilfe, etwa zu einer gerade veröffentlichten Funktion oder einem Shortcut für Power-User.
4. Geführter Onboarding-Tooltip
Diese Tooltips werden automatisch als Schritte einer Abfolge angezeigt und begleiten einen neuen Nutzer mit einer verankerten Nachricht nach der anderen durch einen Workflow, oft mit einem Schrittzähler („2 von 5“) und einem Weiter-Button. Hier ist der Tooltip ein Lehrmittel statt eines passiven Labels, und er bildet das Rückgrat der meisten Product Tours und User-Onboarding-Abläufe. Echte Designs finden Sie in unseren Beispielen für Onboarding-Tooltips.
5. Maskierter Tooltip
Ein maskierter Tooltip dunkelt den restlichen Bildschirm mit einem halbtransparenten Overlay ab und setzt einen Spotlight-Ausschnitt um das Ziel-Element. Es ist das Muster mit der höchsten Aufmerksamkeit überhaupt (alles andere tritt visuell wie gedanklich in den Hintergrund) und ist deshalb dem einen entscheidenden Schritt eines Ablaufs vorbehalten, dem Moment, in dem sich entscheidet, ob ein Nutzer aktiviert wird oder abwandert. Weil er so eindringlich ist, sollte er sparsam eingesetzt werden.
Die fünf Tooltip-Arten nach Aufmerksamkeit geordnet: leise Hover-Labels und Hotspots für optionale Hilfe, geführte und maskierte Schritte für die Momente, die über die Aktivierung entscheiden.
Welche Art sollten Sie verwenden? Passen Sie die Intensität des Tooltips an die Bedeutung des Moments an. Setzen Sie leise Hover- und Hotspot-Tooltips für optionale, entdeckbare Hilfe ein, und heben Sie sich geführte oder maskierte Tooltips für die Schritte auf, die wirklich darüber entscheiden, ob ein neuer Nutzer Erfolg hat. Wer jedem Element maximale Aufmerksamkeit verschafft, sorgt am schnellsten dafür, dass alle seine Tooltips ignoriert werden.
Tooltip vs. Modal vs. Popover vs. Hotspot
Tooltips werden oft mit anderen In-App-Mustern verwechselt, die ebenfalls über der Oberfläche erscheinen. So schneiden sie im Vergleich ab, damit Sie für jede Aufgabe das richtige wählen.
| Muster | Größe & Inhalt | An einem Element verankert? | Unterbricht den Nutzer? | Am besten für |
|---|---|---|---|---|
| Tooltip | Klein, kurzer Text | Ja | Nein | Schnelle Hinweise und Labels im Kontext |
| Popover | Mittel, reichhaltige Inhalte (Text, Bilder, Buttons) | Ja | Nein | Reichhaltigere verankerte Inhalte, die der Nutzer öffnet |
| Modal | Groß, vollständige Nachricht | Nein (Bildschirmmitte) | Ja (blockiert die Seite) | Ankündigungen oder Entscheidungen, die gesehen werden müssen |
| Hotspot | Winziges Signal, das einen Tooltip öffnet | Ja | Nein | Entdeckbare Hilfe ohne Druck |
Kurz gesagt: Ein Tooltip ist die leichtgewichtige Variante, klein, verankert und unaufdringlich. Ein Popover ist sein schwererer Verwandter, der reichhaltigere Inhalte aufnimmt. Ein Modal unterbricht bewusst, damit etwas garantiert gesehen wird. Und ein Hotspot ist eigentlich ein Auslöser, der bei Bedarf einen Tooltip einblendet. Die Wahl zwischen ihnen ist vor allem eine Frage, wie viel Aufmerksamkeit der Moment verdient.
Best Practices für Tooltip-UX
Ein Tooltip ist schnell hinzugefügt und leicht falsch eingesetzt. Diese Prinzipien trennen wirklich hilfreiche Tooltips von denen, die Nutzer zu überhören lernen.
Im Kontext an einem echten Element verankern
Die Stärke eines Tooltips ist seine Nähe zu dem, was er erklärt. Verankern Sie ihn immer an dem konkreten Button, Feld oder Icon, das er beschreibt. Lassen Sie ihn nie mitten auf dem Bildschirm schweben, wo der Nutzer erst suchen muss, worauf er sich bezieht.
Fassen Sie sich kurz
Ein Tooltip ist ein Hinweis, kein Hilfeartikel. Ein klarer Satz schlägt einen ganzen Absatz. Wenn Sie drei Zeilen Text schreiben, ist das ein Zeichen, dass Sie einen Popover, eine reichhaltigere In-App-Nachricht oder einen Link zur Dokumentation brauchen, und keinen größeren Tooltip.
Verstecken Sie wichtige Informationen nie hinter einem Hover
Hover-Tooltips funktionieren nicht auf Touchscreens und werden auch mit der Maus leicht übersehen. Alles, was ein Nutzer wissen muss, um eine Aufgabe abzuschließen, gehört in die Oberfläche selbst. Heben Sie Tooltips für Hilfe auf, die wirklich ergänzend ist.
Immer nur einen auf einmal zeigen
Der häufigste Tooltip-Fehler: alle Hinweise gleichzeitig auf dem ersten Bildschirm abzufeuern. Eine Wand aus Tooltips überfordert, wird reflexartig weggeklickt und bringt dem Nutzer bei, Ihre Anleitung für den Rest seiner Reise zu ignorieren. Zeigen Sie immer nur einen kontextbezogenen Tooltip, passend zu der Stelle, an der sich der Nutzer gerade befindet.
Aufmerksamkeit an die Bedeutung anpassen
Nutzen Sie leise Muster (Hover-Labels, Hotspots) für optionale Anleitung und schwerere (geführte Schritte, Masken) nur für die Momente, die über die Aktivierung entscheiden. Wenn jeder Schritt maximale Aufmerksamkeit verlangt, bekommt sie keiner.
Achten Sie auf Barrierefreiheit
Gute Tooltips sind per Tastatur erreichbar (nicht nur per Hover), bleiben lange genug sichtbar, um sie zu lesen, verdecken nicht das Element, das sie beschreiben, und haben genug Farbkontrast, um lesbar zu bleiben. Nutzer von Screenreadern sollten über korrekte ARIA-Attribute dieselben Informationen erhalten. Barrierefreie Tooltips erfüllen nicht nur Vorgaben, sie sind für alle verständlicher.
Das untrügliche Zeichen für zu viele Tooltips: Wenn Ihr Produkt an fast jedem Element einen Tooltip braucht, ist die Oberfläche selbst vermutlich nicht klar genug. Tooltips sollten gelegentlich ein mehrdeutiges Bedienelement ausbessern, nicht der Kleber sein, der eine verwirrende UI zusammenhält. Korrigieren Sie zuerst die offensichtlichen Beschriftungen und setzen Sie Tooltips dann für das ein, was wirklich einer Erklärung bedarf.
So fügen Sie mit Kompassify Tooltips ohne Code hinzu
Früher bedeutete das Hinzufügen von Tooltips, einen Entwickler zu bitten, eine Bibliothek einzubinden, die Texte fest einzuprogrammieren und jedes Mal neu zu deployen, wenn Sie ein Wort ändern wollten. Das ist langsam und stellt Ihre In-App-Anleitung hinten in den Engineering-Backlog. So muss es nicht laufen.
Kompassify ist eine No-Code-Plattform für User Onboarding, mit der Produkt-, Onboarding- und Customer-Success-Teams Tooltips erstellen und veröffentlichen, ohne die Codebasis anzufassen. Sie installieren einmalig ein einziges JavaScript-Snippet, und ab dann steuern Sie alles im Kompassify-Dashboard:
- Per Point-and-Click verankern. Wählen Sie ein beliebiges Element in Ihrem Live-Produkt und hängen Sie einen Tooltip daran, ganz ohne selbst geschriebene CSS-Selektoren.
- Auslöser und Stil wählen. Hover, Klick, Hotspot-Signal, geführter Schritt oder maskiertes Spotlight, mit Ihren eigenen Farben und Texten.
- Zu Abläufen verketten. Verbinden Sie Tooltips zu einem vollständigen Produkt-Walkthrough, segmentiert nach Nutzertyp.
- Messen und verbessern. Verfolgen Sie, wie jeder Tooltip und jeder Ablauf abschneidet, und testen Sie Texte und Targeting per A/B-Test, alles ohne erneutes Deployment.
Weil nichts fest einprogrammiert ist, können Sie den Wortlaut eines Tooltips in Sekunden ändern, ihn an ein anderes Element verschieben oder ganz abschalten. So entsteht genau die kontextbezogene Anleitung, die Nutzeraktivierung und Feature Discovery steigert. Kompassify ist DSGVO-konform, wird in der EU gehostet und ist für bis zu 100 monatlich aktive Nutzer kostenlos. Sie können Ihre ersten Tooltips also ausrollen, bevor Sie einen Cent ausgeben.
Ihr erster Tooltip, kostenlos
Verankern Sie einen Tooltip an einem beliebigen Element Ihres Produkts, wählen Sie Auslöser und Stil und veröffentlichen Sie, ganz ohne Code. Kostenlos für bis zu 100 monatlich aktive Nutzer.
Kostenlos starten →Häufig gestellte Fragen
Was ist ein Tooltip?
Ein Tooltip ist eine kleine kontextbezogene Nachricht, die neben einem bestimmten Element einer Benutzeroberfläche erscheint (einem Button, einem Icon, einem Eingabefeld oder einem Menüpunkt), um zu erklären, was dieses Element tut, oder um den Nutzer zu einer Aktion zu bewegen. Tooltips sind an dem Element verankert, das sie beschreiben. So liefern sie eine kurze Hilfe im Kontext, genau dort und dann, wo der Nutzer sie braucht, ohne den Bildschirm zu übernehmen, wie es ein Modal tut.
Was bedeutet das Wort „Tooltip“?
Das englische Wort Tooltip bezeichnete ursprünglich das kleine Label, das in früher Desktop-Software erschien, wenn man den Mauszeiger über ein Werkzeug-Icon bewegte: Es nannte den Namen des Werkzeugs, also einen „Tipp“ (tip) zum „Werkzeug“ (tool). Die Bedeutung hat sich seitdem erweitert: Heute ist ein Tooltip jede kleine, verankerte Nachricht, die ein UI-Element erklärt oder auf es hinweist, egal ob sie durch Hover, Fokus oder Klick ausgelöst oder automatisch als Teil eines Onboarding-Ablaufs angezeigt wird.
Was ist der Unterschied zwischen einem Tooltip und einem Popover?
Ein Tooltip ist in der Regel klein, besteht nur aus Text und dient als kurzes Label oder kurze Erklärung. Er erscheint oft bei Hover oder Fokus und verschwindet, sobald der Nutzer weitergeht. Ein Popover ist größer, kann reichhaltige Inhalte enthalten (Überschriften, Bilder, Buttons, Links) und bleibt meist geöffnet, bis der Nutzer ihn schließt. Kurz gesagt: Tooltips sind für schnelle, leichtgewichtige Hinweise da, Popovers für reichhaltigere, interaktive Inhalte, die an einem Element verankert sind.
Sind Tooltips gute UX?
Tooltips sind gute UX, wenn sie für wirklich hilfreiche Hinweise im Kontext eingesetzt werden: um ein unbekanntes Bedienelement zu erklären, einen Button, der nur aus einem Icon besteht, zu beschriften oder einen Nutzer zum nächsten Schritt zu bewegen. Schlechte UX werden sie, wenn sie wichtige Informationen hinter einem Hover verstecken, alle auf einmal erscheinen, Offensichtliches wiederholen oder der einzige Zugang zu etwas Wichtigem sind. Sparsam und kontextbezogen eingesetzt, verringern Tooltips Verwirrung. Übermäßig eingesetzt, erzeugen sie nur Rauschen.
Wie füge ich meiner App ohne Code einen Tooltip hinzu?
Sie können Tooltips ohne Code mit einer No-Code-Onboarding-Plattform wie Kompassify hinzufügen. Sie installieren einmalig ein einziges JavaScript-Snippet und verankern dann per Point-and-Click einen Tooltip an einem beliebigen Element Ihres Produkts, schreiben den Text, wählen Auslöser und Stil und veröffentlichen, alles direkt im Kompassify-Dashboard. So können Produkt-, Onboarding- und Customer-Success-Teams kontextbezogene Tooltips ausrollen, ohne auf die Entwicklung zu warten. Den vollständigen Workflow erklärt unser Leitfaden dazu, wie Sie Onboarding-Tooltips erstellen, die konvertieren.