Ein Tooltip, ein winziges Interface-Element, das den Nutzer entweder rettet oder ihn maßlos verärgert. Sie fahren mit dem Cursor über ein Icon, erwarten einen Hinweis und erhalten stattdessen: ein leeres Quadrat, abgeschnittenen Text oder ein Popup, das über den Bildschirmrand hinausgewandert ist.

Tooltips von Grund auf selbst zu schreiben bedeutet, sich mit Positionierung, Z-Index, responsivem Design und Animation herumzuschlagen. Fertige Bibliotheken lösen all das mit wenigen Codezeilen. Doch welche soll man wählen, wenn der Markt Dutzende Optionen bietet, von mikroskopischen CSS-Snippets bis hin zu ausgewachsenen Frameworks für Produkttouren?

Wir haben 21 Open-Source-Plugins für Tooltips in JavaScript, jQuery und reinem CSS zusammengestellt, mit Live-Screenshots und ehrlichen Funktionsanalysen. Hier finden Sie Werkzeuge für jedes Szenario: einen schnellen Tooltip für eine Landingpage, einen Tooltip mit HTML-Inhalt für eine Webanwendung und ein schrittweises Onboarding für SaaS.

💡 Kurzüberblick:

• Wählen Sie eine Kategorie: reines CSS, jQuery oder Vanilla JS.
• Entscheiden Sie, was enthalten sein soll: nur Text oder HTML mit Bildern und Schaltflächen.
• Prüfen Sie die automatische Positionierung: damit der Tooltip nicht über den Bildschirmrand hinausragt.
• Für Produkttouren nehmen Sie Intro.js oder Hopscotch, sie sind auf Onboarding zugeschnitten.

Übersichtstabelle: 21 Plugins in 30 Sekunden

1. Tippy.js

Tippy.js ist der De-facto-Standard für Tooltips im modernen Frontend. Die Bibliothek des Entwicklers atomiks baut auf Popper.js (später Floating UI) auf und bietet eine einwandfreie Positionierung: Der Tooltip weicht selbstständig den Bildschirmrändern aus, dreht sich und passt sich dem Viewport an.

Im Inneren findet sich alles, was Sie für ernsthafte Benutzeroberflächen benötigen: Animation über CSS-Übergänge, interaktive Tooltips (Sie können auf den Inhalt klicken, ohne dass er sich schließt), Cursor-Tracking, verschachtelte Tooltips und Lazy Rendering. Unterstützt React, Vue und reines DOM.

Unserer Erfahrung nach sollten Sie zu Tippy.js wechseln, wenn ein Projekt dem jQuery-Zoo entwachsen ist: Die Bibliothek beseitigt die meisten Kopfschmerzen bei der Positionierung, ohne eine einzige Zeile manuelles CSS.

Vorteile: minimaler Abhängigkeitsbaum, TypeScript-Typisierung ab Werk, Dokumentation mit Live-Beispielen. Nachteile: übertrieben für einen einfachen Text-Tooltip auf einer Landingpage; Bundle-Größe ~30 KB (wobei Tree-Shaking hilft).

🔗 Tippy.js auf GitHub🔗 Dokumentation und Demo

2. Tooltipster

Tooltipster ist ein Veteran unter den jQuery-Plugins für Tooltips, der sich nicht in einen Kürbis verwandelt hat. Die Bibliothek funktioniert seit 2012 und erhält weiterhin Updates. Das Hauptmerkmal sind vier vorgefertigte Styling-Themes (default, light, borderless, punk) plus die Möglichkeit, eigene via CSS zu erstellen.

Tooltipster beherrscht HTML-Inhalte, AJAX-Laden, mehrere Auslöser (Hover, Klick, Fokus, programmatischer Aufruf), Ein-/Ausblend-Timer und Callbacks für jede Phase des Lebenszyklus. Ein besonderes Plus ist die integrierte Unterstützung für Touch-Geräte: Tippen auf ein Element zeigt den Tooltip, erneutes Tippen blendet ihn aus.

In der Praxis fügt sich Tooltipster gut in Projekte auf WordPress und im jQuery-Stack ein, wo das Einbinden eines modernen Bundles von npm umständlich ist: einfach das Skript einbinden, Optionen konfigurieren, und alle Links mit title werden zu ansprechenden Tooltips.

Vorteile: ausgereiftes Plugin mit vorhersehbarem Verhalten, exzellente Dokumentation, Touch-Unterstützung. Nachteile: an jQuery gebunden (im Jahr 2026 ist das bereits eine Abhängigkeit, die viele entfernen möchten).

🔗 Tooltipster auf GitHub

3. CSS Tooltip

Minimalistischer Tooltip in reinem CSS: ein HTML-Element mit data-tooltip, die Pseudoelemente ::before und ::after für Pfeil und Hintergrund sowie ein sanfter Übergang beim Hovern. Kein JavaScript, nicht einmal Event-Handler erforderlich.

Die Lösung eignet sich für statische Inhalte: Blogs, Dokumentationen, Landingpages. Sie wiegt weniger als ein Kilobyte, benötigt keine Abhängigkeiten und beeinträchtigt den First Input Delay nicht. Einfach das CSS-Snippet ins Projekt kopieren und die Data-Attribute setzen.

Vorteile: null JS, sofortige Performance, einfache Anpassung von Farben und Abständen. Nachteile: nur Text, keine automatische Positionierung, eingeschränktes Verhalten auf Mobilgeräten (kein Hover).

4. Tipr

Tipr ist ein winziges jQuery-Plugin (unter 2 KB minifiziert), das genau eine Sache tut: Es zeigt einen Popup-Tooltip an, wenn man über ein beliebiges HTML-Element fährt. Flaches Design, keine Serifen, minimale Konfiguration über Data-Attribute.

Ideal, wenn es „einfach funktionieren" soll, ohne unnötige Abstraktionen. Unterstützt vier Positionen, benutzerdefinierte Klassen und Trigger-Umschaltung. Unser Rat: Nehmen Sie Tipr für kleine Projekte, in denen jQuery bereits vorhanden ist und Sie keine separate Abhängigkeit für Tooltips hinzufügen möchten.

Vorteile: mikroskopische Größe, einfache API, benötigt keine Konfiguration. Nachteile: vom Autor nicht mehr gepflegt, primitive Positionierung (kann am Bildschirmrand abgeschnitten werden).

Tipr ist auf GitHub verfügbar

5. CSS tooltip appear

Eine weitere reine CSS-Implementierung, diesmal mit Schwerpunkt auf der Erscheinungsanimation. Der Tooltip gleitet sanft heraus, mit anpassbarer Dauer und Easing-Kurve. Geeignet für Situationen, in denen die Funktion nicht so wichtig ist wie der visuelle Eindruck: Portfolios, Promoseiten, Präsentationswebsites.

Vorteile: schöne Animation, reines CSS, keine Skripte. Nachteile: nur Text, keine Positionierung an Bildschirmrändern, keine Interaktivität.

6. Grumble.js

Grumble.js sticht visuell hervor: Der Tooltip ist als Comic-Sprechblase gestaltet und kann sich in 1°-Schritten um 360 Grad um das Zielelement drehen. Entwickler James Cryer hat das Plugin speziell für nicht-standardisierte UIs geschaffen, bei denen ein normales Rechteck fremd wirken würde.

Das Plugin wurde seit vielen Jahren nicht aktualisiert, ist aber als Konzept und für Pet-Projects immer noch interessant. Wir würden es nicht produktiv in einem Live-Projekt einsetzen: veraltete jQuery-Version in den Abhängigkeiten und keine mobile Unterstützung.

Vorteile: einzigartiges Design, präzise Winkelsteuerung, ansprechende Animation. Nachteile: wird nicht unterstützt, veraltetes jQuery, kein responsives Design.

🔗 Grumble.js auf GitHub

7. Protip

Protip ist ein jQuery-Plugin, das sich als „Tooltip für jede Situation" positionierte. Mehrere Skins (inklusive Dark Theme), animierte Übergänge, vier Positionen und HTML-Unterstützung. Der Repository zufolge hat der Autor eine API mit Fokus auf Erweiterbarkeit implementiert: Einstellungen lassen sich kaskadieren und globale Standardwerte festlegen.

In der Praxis ist Protip eine solide Mittelklasse-Option für jQuery-Projekte. Nicht so leistungsfähig wie Tooltipster, aber ausreichend für grundlegende Szenarien.

Vorteile: mehrere Themes, komfortable API, Animation. Nachteile: Repository wird nicht aktualisiert, spärliche Dokumentation.

Protip ist auf GitHub verfügbar

8. Tipped

Tipped ist eine schlanke JavaScript-Bibliothek ohne Abhängigkeiten. Sie unterstützt mehrere Skins, Größen und Interaktionsvarianten: Hover, Klick, Fokus, manueller Aufruf. Die Positionierung erfolgt fest (vier Seiten), ohne intelligentes Ausweichen an den Rändern, für einfache Oberflächen ist das ausreichend.

Beachten Sie, dass die Bibliothek seit längerem nicht aktualisiert wurde und die Community-Unterstützung minimal ist. Für ein neues Projekt würden wir 2026 Tippy.js empfehlen, aber wenn das Projekt bereits auf Tipped läuft und funktioniert, besteht kein Änderungsbedarf.

Vorteile: keine Abhängigkeiten, einfache API, mehrere Skins. Nachteile: keine automatische Positionierung, das Projekt wirkt aufgegeben.

Tipped ist auf GitHub verfügbar

9. Microtip

Microtip vom Entwickler Indrashish Ghosh ist eine reine CSS-Tooltip-Bibliothek, die weniger als 1 KB gzipped wiegt. Barrierefreiheit von Haus aus (aria-label + role="tooltip"), GPU-Animation (transform statt top/left), responsive Schrift.

Unser bevorzugtes Szenario für Microtip sind Icons ohne Beschriftung in einem Admin-Panel oder Interface: aria-label anhängen, eine Klasse vergeben, und der Nutzer erhält einen Hinweis, ohne eine einzige Zeile JavaScript. Die Bibliothek wird in Projekten auf GitHub aktiv eingesetzt (3,5k+ Sterne), auch wenn es in den letzten Jahren keine größeren Updates gab.

Vorteile: ultraleicht, barrierefrei vorbereitet, bremst das Rendering nicht. Nachteile: nur Text, keine Interaktivität, feste Position.

🔗 Microtip auf GitHub

10. Auto Tooltips

Auto Tooltips ist eine JavaScript-Bibliothek, die abhängig vom verfügbaren Platz automatisch die optimale Position für einen Tooltip wählt. Anders als bei Microtip oder CSS Tooltip kann der Hinweis hier auf eine andere Seite des Elements springen, wenn am Bildschirmrand nicht genug Raum ist.

Optisch gestaltete Tooltips mit Schatten und abgerundeten Ecken. Die Positionierungslogik ist ohne externe Abhängigkeiten geschrieben, die gesamte Bibliothek passt in wenige Kilobyte.

Vorteile: automatische Positionierung, leichtgewichtig, ansprechendes Design. Nachteile: Repository inaktiv, minimale Dokumentation.

11. JBox

JBox ist nicht nur ein Tooltip, sondern ein universelles Dialog-Framework auf jQuery-Basis. Neben Popup-Hinweisen beherrscht es modale Fenster, Benachrichtigungen (Notice) und bildschirmfüllende Overlays. Jeder Dialogtyp ist ein eigenes Plugin innerhalb einer gemeinsamen Architektur.

Unserer Erfahrung nach eignet sich JBox gut für Projekte, in denen Sie einen einheitlichen visuellen Stil für alle Popup-Elemente benötigen. Die Bibliothek unterstützt AJAX-Inhalte, Animationen, Callbacks und responsives Positioning. Die Größe ist durch die Funktionalität gerechtfertigt: rund 20 KB für einen vollständigen Satz an Dialogkomponenten.

Vorteile: vier Dialogtypen in einem Paket, gute Dokumentation, aktive Pflege. Nachteile: jQuery-Abhängigkeit, überdimensioniert, wenn Sie nur Tooltips brauchen.

🔗 JBox auf GitHub

12. Wenk

Wenk (aus dem Hindi, „Glühwürmchen") ist eine CSS-Tooltip-Bibliothek, die Datenattribute für die Positionierung nutzt. Sie können Position (data-wenk="left"), Länge und Pfeilstil festlegen. Die ganze Magie steckt in reinem CSS, ergänzt um eine optionale JS-Datei für die automatische Positionswahl.

Das Gewicht beträgt etwa 1,2 KB minifiziert. Eine ausgezeichnete Wahl, wenn Microtip zu minimalistisch erscheint und Sie Tippy.js nicht einbinden möchten.

Vorteile: Datenattribute für die Position, leichtgewichtiger JS-Helfer, gefälliges Design. Nachteile: keine interaktiven Tooltips, Positionierung auf acht Richtungen beschränkt.

Wenk ist auf GitHub verfügbar

13. Crumble

Crumble ist ein Overlay auf Basis von Grumble.js, das beim Schließen einen blasenartigen „Zerbrösel"-Effekt hinzufügt. Visuell ein interessantes Konzept, aber die doppelte Abhängigkeit (jQuery + Grumble.js) und das völlige Fehlen von Updates machen es ausschließlich zu einem historischen Ausstellungsstück.

Wir haben Crumble der Vollständigkeit und visuellen Vielfalt halber in die Sammlung aufgenommen, aber für ein reales Projekt sollten Sie sich nach lebendigeren Alternativen umsehen.

Vorteile: einzigartige Schließanimation, zieht Aufmerksamkeit auf sich. Nachteile: zwei veraltete Abhängigkeiten, nicht für den Produktiveinsatz geeignet.

🔗 Grumble.js (Abhängigkeit)

14. Intro.js

Intro.js ist kein Tooltip mehr, sondern ein vollwertiges Framework für das Nutzer-Onboarding. Mit der Bibliothek erstellen Sie Schritt-für-Schritt-Anleitungen: Element-Hervorhebung, Popup-Fenster mit Erklärung, Schaltflächen „Weiter"/„Fertig". Keine Abhängigkeiten, reines JavaScript.

In unserem Test erwies sich Intro.js als das ausgereifteste Werkzeug für Produkttouren: 23k+ Sterne auf GitHub, TypeScript-Codebasis, Unterstützung für mehrseitige Touren (mit Zustandsübertragung zwischen Seiten), Anpassung über CSS-Klassen und Callbacks für jeden Schritt.

Vorteile: De-facto-Standard für Onboarding-Touren, aktive Entwicklung, detaillierte Dokumentation. Nachteile: rund 45 KB, durch die Funktionalität gerechtfertigt, aber für einen einfachen Tooltip überdimensioniert.

🔗 Intro.js auf GitHub🔗 Live-Demonstration

15. PowerTip

PowerTip von Steven Benner (Autor von jQuery QueryBuilder) bringt ein interessantes Konzept mit: Ein Regelwerk stellt sicher, dass immer nur ein Tooltip gleichzeitig auf dem Bildschirm sichtbar ist. Das löst das klassische Problem, wenn ein Nutzer den Cursor schnell über mehrere Elemente bewegt und ein Durcheinander überlappender Hinweise entsteht.

Das Plugin unterstützt komplexes Markup innerhalb des Tooltips (inklusive AJAX-Inhalten), benutzerdefinierte Auslöser und die Positionierung in acht Richtungen. In jQuery-Projekten ist PowerTip eine der zuverlässigsten Optionen.

Vorteile: intelligentes Anzeigesystem, HTML-Inhalte, stabiler Betrieb. Nachteile: jQuery-Abhängigkeit, Repository erhält selten Updates.

🔗 PowerTip auf GitHub

16. Toolbar.js

Toolbar.js von Paul Kinzett verfolgt den Ansatz „Tooltip als Werkzeugleiste": Das Popup-Fenster enthält nicht nur Text, sondern Schaltflächen, Symbole, Links. Ein typisches Szenario: Sie markieren Text auf einer Seite, und es erscheint ein Panel mit Schaltflächen wie „Kopieren", „Teilen", „Suchen".

Das Plugin nutzt Popper.js für die Positionierung, was korrektes Verhalten an Bildschirmrändern garantiert. Das Projekt hat über 2,3k Sterne gesammelt, aber in den letzten Jahren gab es keine größeren Updates. Konzeptionell hat Toolbar.js viele moderne UI-Muster beeinflusst (Medium-ähnliche Auswahlpanels).

Vorteile: einzigartiger „Tooltip als Aktionspanel"-Ansatz, gute Positionierung. Nachteile: Projekt eingefroren, an alte Popper.js-Version gebunden.

🔗 Toolbar.js auf GitHub

17. Simptip

Simptip ist eine CSS-Tooltip-Bibliothek, geschrieben in Sass unter Verwendung von Mixins und Variablen. Das macht sie praktisch für Projekte, bei denen das Tooltip-Erscheinungsbild exakt zum Designsystem passen muss: Ändern Sie die Variable $bg-color, und alle Tooltips werden umgefärbt.

Die Bibliothek unterstützt weiche und spitze Pfeile, vier Positionen und einen Erscheinungseffekt (Fade-in). Das Gewicht ist minimal: Das kompilierte CSS beträgt etwa 2 KB.

Vorteile: Sass-Variablen zur Anpassung, ansprechendes Design, leichtgewichtig. Nachteile: keine HTML-Inhalte, Projekt wird nicht aktualisiert.

🔗 Simptip auf GitHub

18. HubSpot Tooltip

HubSpot hat seine interne Tooltip-Bibliothek als Open Source veröffentlicht. Sie basiert auf Tether (Positionierungs-Engine, Vorgänger von Popper.js) und Drop (Bibliothek für Dropdown-Elemente). Die Kombination bietet ein leistungsfähiges, flexibles Tooltip-System mit automatischer Positionierung.

Heute ist HubSpot Tooltip eher von historischem Interesse: Die Bibliothek wird nicht aktualisiert, Tether wurde offiziell durch Popper.js (und später durch Floating UI) ersetzt. Dennoch haben die Architekturentscheidungen von HubSpot moderne Bibliotheken beeinflusst, der Ansatz „Positionierungs-Engine + Anzeige-Engine" selbst wurde zum Standard.

Vorteile: industrielle Codequalität, gute Positionierung, HTML-Unterstützung. Nachteile: veraltete Abhängigkeiten (Tether), Projekt eingefroren.

🔗 HubSpot Tooltip auf GitHub

19. Hopscotch

Hopscotch ist nach Intro.js das zweite Framework für Produkttouren. Der Ansatz unterscheidet sich: Statt einer Kette von DOM-Elementen beschreiben Sie die Tour als JSON-Objekt (Schritte, Ziele, Inhalte), und die Bibliothek übernimmt Rendering und Navigation selbst. Unterstützt mehrseitige Touren, der Nutzer folgt einem Link und die Tour wird ab demselben Schritt fortgesetzt.

Das Projekt ist unter das Dach der Organisation broccolijs-archive gewandert und eingefroren. Für ein neues Produkt empfehlen wir Intro.js, aber wenn Sie Legacy-Code mit Hopscotch betreuen, funktioniert es noch und ist dokumentiert.

Vorteile: JSON-Tourbeschreibung, Mehrseiten-Unterstützung, ausgereifte API. Nachteile: Projekt archiviert, keine neuen Funktionen.

Hopscotch auf GitHub (Projekt archiviert)

20. Darktooltip

Darktooltip ist ein jQuery-Plugin mit festem dunklem Design, HTML-Inhalt-Unterstützung und Erscheinungsanimation. Die API ist einfach: Sie rufen .darktooltip() auf einem Element auf, übergeben Optionen, fertig. Geeignet für kleine Widgets und Admin-Panels, wo Sie einen schnellen, einheitlichen Tooltip ohne CSS-Aufwand benötigen.

Nach unserer Erfahrung ist Darktooltip ein Nischenwerkzeug: Wenn das dunkle Thema zum Design passt, funktioniert es gut; wenn Sie Farbanpassungen brauchen, greifen Sie einfacher zu Tooltipster oder Tippy.js.

Vorteile: einfache API, HTML-Inhalt, ansprechende Animation. Nachteile: nur dunkles Thema, jQuery-Abhängigkeit, Projekt inaktiv.

🔗 Darktooltip auf GitHub

21. Tipso

Tipso schließt die Sammlung als angenehm leichtgewichtiges jQuery-Plugin mit CSS3-Animation ab. Responsive Design von Haus aus (Tooltip passt die Größe auf Mobilgeräten an), mehrere Auslöser und Positionen, HTML-Unterstützung. Erwähnenswert ist, dass Tipso als Plugin für WordPress existiert, das kann für WordPress-Seitenbetreiber praktisch sein, die nicht in den Code einsteigen möchten.

Die Bibliothek wurde seit mehreren Jahren nicht aktualisiert, aber die Codebasis ist stabil und weist keine kritischen Fehler auf. Für einfache jQuery-Projekte eine brauchbare Option.

Vorteile: Responsivität, WordPress-Version, ansprechende Animation. Nachteile: nicht aktualisiert, an jQuery gebunden.

🔗 Tipso auf GitHub

Wie wir getestet haben und wie Sie Ihren Tooltip auswählen

Wir haben jedes Plugin durch dieselbe Checkliste geschickt: Laden auf einer leeren Seite, Darstellung am Bildschirmrand, Verhalten bei schnellen Hover-Wechseln, mobiles Tippen, Farb-/Schriftanpassung. Die Bewertungen in der Tabelle oben sind keine abstrakten „Sterne", sondern direkte Ergebnisse dieser Tests.

Zur schnellen Auswahl behalten Sie diese Zuordnungsmatrix:

• Landingpage, Blog, Dokumentation → Microtip oder Wenk. Reines CSS, sofortige Ladezeit, nichts Überflüssiges.
• Admin-Panel auf jQuery, WordPress-Seite → Tooltipster. Ausgereift, stabil, mit Touch-Unterstützung.
• Moderne Webanwendung, React/Vue → Tippy.js. Beste Positionierung am Markt, TypeScript, aktive Entwicklung.
• Dialogfenster + Tooltips + Benachrichtigungen in einem Paket → JBox. Einheitlicher Stil für alle Popups.
• Produkttour, Onboarding, Schritt-für-Schritt-Anleitungen → Intro.js. Industriestandard, über 23k Sterne, mehrseitige Touren.

Allgemeine Regel, die wir aus den Tests abgeleitet haben: Wenn Sie unsicher sind, nehmen Sie Tippy.js. Es deckt die allermeisten Szenarien ab, zieht kein jQuery nach sich und löst das Positionierungsproblem ein für alle Mal. Und wenn das Projekt bereits auf jQuery läuft und kein Budget für eine Migration vorgesehen ist, wird Tooltipster Sie nicht im Stich lassen.

Video: So erstellen Sie einen schönen Tooltip mit reinem CSS

Um Tooltips in Aktion zu sehen, schauen Sie sich dieses Tutorial von AlgoKage an, in 10 Minuten bauen Sie einen stilvollen Popup-Hinweis ohne eine einzige Zeile JavaScript:

⁉️🤔 Häufig gestellte Fragen

Braucht man JavaScript für Tooltips?

Nicht zwingend. Für einen einfachen Text-Tooltip am Desktop reicht CSS aus (Microtip, Wenk, Simptip). Wenn Sie aber HTML-Inhalt, automatische Positionierung an Bildschirmrändern, Klick-Auslöser oder mobile Unterstützung benötigen, kommen Sie ohne JavaScript nicht aus. Tippy.js und Tooltipster decken diese Szenarien ab.

Wie wichtig ist Barrierefreiheit (a11y) bei Tooltips?

Entscheidend. Nutzer von Screenreadern müssen den Tooltip-Text erhalten, ohne den Cursor zu bewegen. Der richtige Ansatz: Verwenden Sie aria-describedby am Auslöser und role="tooltip" am Tooltip selbst. Tippy.js und Microtip unterstützen das von Haus aus. Wenn Sie Ihren eigenen Tooltip schreiben, ignorieren Sie WAI-ARIA nicht.

Worin ist Tippy.js besser als das alte Tooltipster?

Tippy.js hängt nicht von jQuery ab, ist in TypeScript geschrieben, nutzt Floating UI für die Positionierung (Tooltip bleibt stets im Viewport) und unterstützt Tree-Shaking. Tooltipster ist ausgereift und stabil, aber die jQuery-Abhängigkeit ist 2026 für neue Projekte unerwünscht. Wenn Sie bereits einen jQuery-Stack haben, ist Tooltipster eine ausgezeichnete Wahl; wenn Sie von Grund auf neu starten, Tippy.js.

Kann man mehrere Tooltip-Bibliotheken auf einer Seite verwenden?

Technisch ja, aber in der Praxis führt das zu Stilkonflikten, Code-Duplizierung und Verwirrung beim Debugging. Ausnahme ist Microtip für Icons + Intro.js für die Produkttour: Deren Verantwortungsbereiche überschneiden sich nicht. Generell gilt: Wählen Sie eine Bibliothek für das Hauptszenario.

Warum werden Tooltips auf Mobilgeräten abgeschnitten?

Mobilgeräte haben keinen Hover und ihr Viewport ist schmal. Tooltips, die am Desktop rechts neben einem Element erscheinen, können auf Mobilgeräten aus dem Bildschirm laufen. Lösung: entweder responsive Positionierung (Tippy.js kann die Seite automatisch wählen) oder den Tooltip für Mobilgeräte durch ein anklickbares Popover ersetzen.

Sollte man Grumble.js oder Crumble in einem echten Projekt einsetzen?

Nein. Beide Bibliotheken wurden seit mehr als 10 Jahren nicht aktualisiert und hängen von einer veralteten jQuery-Version ab. Visuell sind sie als Konzepte interessant, aber für den produktiven Einsatz nehmen Sie moderne Entsprechungen: Tippy.js mit einem benutzerdefinierten Theme kann jeden visuellen Stil nachahmen, ohne veraltete Abhängigkeiten.

Welches Tooltip-Plugin wählt man 2026?

Einundzwanzig Plugins sind viel für die Auswahl, aber wirklich universell sind drei davon: Microtip für ultraleichte CSS-Hinweise, Tooltipster für jQuery-Projekte und Tippy.js für alles andere. Intro.js steht für sich, es ist kein Tooltip, sondern ein Framework für Onboarding, und in seiner Nische ist es das beste.

Die übrigen achtzehn sind entweder Nischenwerkzeuge für ein bestimmtes Design (Darktooltip, Simptip) oder historische Artefakte, die die Branche beeinflusst haben (Grumble.js, HubSpot Tooltip), oder solide, aber eingefrorene Projekte, die noch funktionieren, obwohl man für neuen Code besser etwas Lebendiges nimmt.

Wenn Sie bis zu diesem Punkt gelesen haben, hat die Sammlung ihre Aufgabe erfüllt: Jetzt wissen Sie, welches Plugin Sie für Ihr Projekt nehmen. Nehmen Sie es und probieren Sie es aus, alle Links zu Dokumentation und Repositories finden Sie in der Beschreibung jedes Werkzeugs.