Tippy.js - Leichte Vanilla Javascript Tooltip-Bibliothek

QuickInfos sind hilfreich, wenn Sie etwas zusätzlichen Inhalt anzeigen möchten. Sie sparen Platz auf der Seite und geben Ihnen einen Raum, um etwas zu animieren, das die Aufmerksamkeit der Menschen auf sich zieht.

In der Vergangenheit haben wir Tooltip-Skripts behandelt, aber viele Entwickler wünschen sich benutzerdefinierte Bibliotheken. Einige bevorzugen jQuery, andere wollen einfache Vanilla JS.

Das Tippy-Plugin funktioniert am besten für die letztere Gruppe die mit Vanilla JS Code arbeiten wollen.

Mit Tippy.js erhalten Sie eine voll funktionsfähige Tooltip-Bibliothek läuft auf Popper.js. Das Plugin hat also eine kleine Abhängigkeit, ist aber viel einfacher zu verwalten als die jQuery-Bibliothek.

Was ist die Schönheit von Tippy? Sie fügt die zu erstellenden Popper-Standardstile hinzu dynamischere Tooltipps mit unglaublichen Wirkungen.

Sie können Überblendungen, Folien, Wiggles, benutzerdefinierte Dauer, Callback-Methoden und sogar dynamische Effekte wie automatisch rotierende QuickInfos hinzufügen.

Mit diesem Plugin werden Ihre Tooltips mit gut definierten Usability-Funktionen auf ein neues Level gehoben. Du kannst behalten Tooltips, die mit bestimmten Seitenelementen am Bildschirm fixiert wurden, oder lassen Sie sie die Ausrichtung ändern, wenn der Bildschirm zu klein wird.

Es unterstützt auch Touch-Geräte, wodurch es sich besonders für responsive Layouts eignet. Der Tooltip-HTML-Code ist mit ARIA-Standards beschriftet, um maximale Zugänglichkeit zu gewährleisten. Ich kann mir nichts schlechtes über dieses Plugin sagen!

Wenn Sie dies in Ihrer eigenen Site ausprobieren möchten, laden Sie einfach eine Kopie des Quellcodes von GitHub herunter. Dies beinhaltet die Haupt-Plugin-Dateien sowie Informationen zur Installation mit npm.

Die standardmäßige Tippy.js-Skriptdatei wird mit Popper.js mitgeliefert, sodass Sie diese zusätzliche Bibliothek nicht einmal herunterladen müssen. Sie benötigen lediglich die Standard-JS / CSS-Datei und eine Webseite zum Ausführen von QuickInfos.

Wenn Sie sich näher mit einigen Beispielen befassen wollen, schauen Sie auf die Homepage von Tippy.j, die Live-Samples + Code-Snippets enthält, die Sie kopieren und wiederverwenden können.