40 nützliche Tooltips Skripts mit CSS, JavaScript und jQuery

Ein interessantes Oberflächenelement, Tooltips (auch Infotips genannt), lassen ein kleines Kästchen erscheinen, wenn das Symbol angezeigt wird Der Mauszeiger wird über einem bestimmten Text oder Bild mit Informationen angezeigt in Bezug auf das Element, das darüber schwebt. In Bezug auf die Benutzererfahrung bieten Tooltips den Benutzern die schnellste und einfachste Informationsquelle ohne etwas klicken zu müssen.

Die einfachste Möglichkeit, Ihrem Text QuickInfos hinzuzufügen, ist die Verwendung eines HTML-Tags oder TITLE =””, ALT =””. Es gibt jedoch einige wirklich coole Tooltips-Designs und -Stile, die Sie mit JavaScript und CSS erstellen können mit QuickInfos-Skripten. Lass uns einen Blick darauf werfen.

CSS

Balloon.css - Balloon ist eine CSS-Bibliothek komponiert mit SasS und WENIGER einen interaktiven Tooltip anzeigen. Der Inhalt und die Position des Tooltips sind über die konfigurierbar Daten- Attribut. Sie können den Tooltip links, rechts oder links-rechts anzeigen. Du kannst sogar Füge Emojis zum Inhalt hinzu. Balloon.css kann über NPM installiert werden oder von CDNJS geladen werden.

Simptip - Mit SasS-Aktivierung gemacht Konfigurieren Sie den Code neu und kompilieren Sie ihn entsprechend Ihrer Anforderungen. Die Position und der Inhalt des Tooltips können über den Klassennamen und das Symbol konfiguriert werden Daten-Tooltip Attribut. Simptip ist als NPM-, Garn- und Bower-Paket.

Hint.css - Hint.css ist eine der beliebtesten CSS-Bibliotheken zur Anzeige von Tooltips. Hint.css wird von vielen beliebten Websites wie Fiverr, Webflow und Tridiv verwendet. Im Gegensatz zu den beiden anderen CSS-Bibliotheken, Hint.css verwendet Aria-Label Sie können die Größe und Farbe über die Klassennamen konfigurieren unter Verwendung der BEM-Methodik. Hint.css ist für NPM, Bower und CDNJS verfügbar.

Mikrospitze - Eine weitere großartige CSS-Bibliothek zum Erstellen von Tooltips, die mit erstellt wurden “Zugänglichkeit” im Hinterkopf, Microtip Verwendet Aria-Label den Tooltip-Inhalt halten und Daten- Attribut zum Konfigurieren der Größe und Position der QuickInfo.

Es verwendet eine CSS-Variable, mit der Sie den Tooltip mit einer einfachen CSS-Datei anpassen können. CSS-Variablen werden bereits von vielen Web- und mobilen Browsern unterstützt. Microtip ist als NPM, Yarn-Paket und UNPkg-CDN erhältlich.

Wenk - Es sind nur 733 Bytes. Eine superleichte Bibliothek in einem hochmodernen CSS mit CSSNext, LESS und SCSS geschrieben So können Sie die Stile nach Ihren Wünschen anpassen und neu kompilieren. Wenk kann von NPM, Yarn und den folgenden kostenlosen CDN-Diensten heruntergeladen werden: rawgit.com und unpkg.com.

Tooltippy - Ein weiterer leichte CSS-Bibliothek nur etwa 1 KB groß. Tooltippy enthält mehrere vorgefertigte Themen zum Gestalten der QuickInfos. Es wurde mit einem CSS-Pre-Prozessor namens Stylus geschrieben. Lesen Sie die Anleitung, wie Sie können erweitern oder anpassen Sie diese Themen.

ElegantTips - Diese Bibliothek enthält einige vorgefertigte Themen das kann mit den angegebenen Klassennamen geändert werden. Im Gegensatz zu den anderen Bibliotheken, die auf HTML5 angewiesen sind Daten- oder der Aria-Label Attribut erfordert ElegantTips ein zusätzliches Element, das zur Erstellung der QuickInfo hinzugefügt wird. Dies ermöglicht es Ihnen Fügen Sie dem Tooltip buchstäblich Inhalte hinzu, die über einfachen Text hinausgehen.

Tootik - Diese CSS-Bibliothek stellt nicht nur das Stylesheet im CSS-, LESS- und SasS-Format bereit, sondern auch ein benutzerfreundliche GUI zum Anpassen der QuickInfo. Sie können den von diesem Tool generierten HTML-Code einfach kopieren und einfügen. So einfach ist das.

VanillaJS

TippyJS - Angetrieben von Popper.js, kommt TippyJS mit einem Fülle von Optionen zum Konfigurieren des Tooltips. Wir können die Animationen, den Tooltip-Pfeil, die Breite, die Größe, das Design und vieles mehr anpassen. Es bietet auch Rückruffunktionen, mit denen Sie das tun können Eine Funktion ausführen, wenn der Tooltip angezeigt und ausgeblendet wird. Diese Funktionen machen TippyJS zu einer unserer leistungsfähigen JavaScript-Bibliotheken, die zur Erstellung von QuickInfos verwendet werden.

Darsain-Tooltip - Diese Bibliothek bietet die grundlegende Implementierung eines Tooltips. Es bietet jedoch umfangreiche Optionen zum Konfigurieren des Tootip-Verhaltens und a Satz von Klassennamen, um das Aussehen der QuickInfo zu ändern. Der Tooltip funktioniert in älteren Browsern wie IE9 und IE8 mit einigen Anpassungen gut.

Bubb - Bubb ist möglicherweise für fortgeschrittene JavaScript-Benutzer geeignet. Verwendung seiner umfangreiche APIs, abgesehen von der Anzeige von einfachem Text, Sie können programmgesteuert komplexeren HTML-Inhalt zur QuickInfo hinzufügen. Es ist ziemlich cool; Sie können die Beispiele auf die Dokumente verweisen.

Popper - Enthält eine technische Abstraktion, um etwas zu schaffen “knallt”, wie ein Tooltip, ein Popover und Dropdown-Listen. TippyJS verwendet es als Bibliotheksgrundlage und wird von großen Namen im Web wie Bootstrap, Microsoft und Atlassian verwendet.

YY-QuickInfo - Im Gegensatz zu den anderen Bibliotheken, YY Tooltip erfordert nicht, dass Sie ein HTML-Element oder Attribute hinzufügen. Es funktioniert vollständig mit JavaScript, und Inhalt, Position und Farben werden in einem Objekt und nicht in einem HTML-Element definiert. Es ist perfekt für die Verwendung mit einer vollständigen JavaScript-Webanwendung.

Position.js - Eine weitere ausgezeichnete native JavaScript-Bibliothek zum Erstellen von Tooltips, Position.js bietet eine GUI zum Konfigurieren der Funktion und zum Kopieren und Einfügen des dort generierten Codes. Position.js kann in Verbindung mit React.js oder Vue.js verwendet werden.

Bezet-Tooltip - Diese Bibliothek bietet 14 Optionen zum Anzeigen des Tooltips; wie auf der Recht, links, Unterseite, links zentriert, rechtes Ende, unten in der Mitte, etc. Darüber hinaus ist es auch schlau genug, dass es könnte Passen Sie die Position des Tooltips an den verfügbaren Platz an den Tooltip umgeben. Schauen Sie sich die Demo an.

MouseTip - Diese JavaScrtipt-Bibliothek erstellt eine Tooltip, der sich entlang der Cursorposition bewegt. Der Tooltip ist mit einem Nichtstandard konfiguriert Mousetip- Attribut statt HTML5 zu verwenden Daten- Attribut. Mousetip ist als NPM-Modul erhältlich.

Internetips - Ganz ähnlich wie MousetTip, die von dieser Bibliothek generierte QuickInfo folgt der Cursorposition. Alles wird durch das JavaScript-Objekt anstelle von HTML und der Attribute werden auch für moderne Browser erstellt. Es ist leicht und schnell.

MTip - Eine JavaScript-Bibliothek für Tooltip mit tolle Browserkompatibilität. Es ist mit IE8 kompatibel und kann über die Optionen vollständig angepasst werden. Außerdem können Sie den Tooltip zu jedem Element hinzufügen, selbst wenn ein Element vorhanden ist img (ein Bildelement).

Bubblesee - eine einfache JavaScript-Bibliothek, die eine unkomplizierte Funktionalität von a bietet “Tooltip”. Es ist einfach, die JavaScript-Bibliothek ohne komplizierte Optionen zum Anpassen der Ausgabe zu verwenden. Eine Sass-Datei wird bereitgestellt, wenn Sie das Aussehen der QuickInfo ändern möchten. Schauen Sie sich die Demo an.

Tipfy - Mit der modernen JavaScript-Syntax ES6 erstellt, Tipfy ist nur 2 KB groß. Die Bibliothek bietet zwei Versionen von Dateien: tipfy.min.js Bereitstellen des Skripts mit moderne ES6-Syntax, und tipfy.es5.min.js wenn Sie Kompatibilität mit älteren Browsern benötigen. Es verwendet Daten- Attribut zum Anpassen der QuickInfo; das Daten-Tipfy-Seite, wird beispielsweise verwendet, um die Richtung der QuickInfo festzulegen und zu verwenden Daten-Tipfy-Text Attribut, um den Inhalt der QuickInfo hinzuzufügen.

jQuery

Tooltipster - Diese Bibliothek bietet umfangreiche Optionen zum Anpassen fast aller Funktionen, z Theme, Animation, Touch-Unterstützung, Inhalt, Auslöser zum Öffnen und Schließen, usw. Außerdem werden benutzerdefinierte Ereignislistener und Rückrufe bereitgestellt, mit denen Entwickler die QuickInfo um benutzerdefinierte Funktionen erweitern können. Ein jQuery-Plugin ist auch das Tooltip funktioniert in älteren Browsern wie IE6, abhängig von der jQuery-Version verwendet werden.

Protip - Ein weiteres umfangreiches jQuery-Plugin unterstützt Protip 49 Positionen, HTML für den Tooltip-Inhalt, Symbolunterstützung und benutzerdefinierte Rückrufe, und vieles mehr. Protip bietet eine grafische Benutzeroberfläche, mit der Sie den Tooltip problemlos anpassen können.

PowerTip - Dieses jQuery-Plugin bietet auch Optionen und APIs, die Entwicklern verschiedene Möglichkeiten zur Implementierung der Tooltips bieten. Es unterstützt Tastaturnavigation; Das Popup erscheint beim Navigieren in Elementen mit der Tab Tastatur. PowereTip ist als NPM-Modul erhältlich. Es kann mit RequireJS und Browserify verwendet werden.

Barrierefreier Aria-Tooltip - Ein jQuery-Plugin mit integrierter Eingabehilfefunktion ist die QuickInfo zum Anzeigen eines Dialogfelds mit einem Titel, mehrzeiligem Text und einer Schaltfläche zum Schließen. Es ist eines von uns auf unserer Liste.

TipsJS - Ein einfaches jQuery-Plugin, das jedoch ganz besondere Merkmale bietet. Das Tooltip-Inhalt wird mit a gesetzt Daten-Tooltip Attribut. Außerdem können wir den Inhalt auch mit Sonderzeichen umschließen, um den Inhalt ähnlich der Markdown-Formatierung zu formatieren. Wir können benutzen * um den Inhalt fett zu machen, ~ für kursiv und ^ zur Überschrift.

Dunkler Tooltip - Diese Bibliothek bietet einige nützliche Funktionen zum Einschalten der QuickInfo. Zum Beispiel können wir eine hinzufügen Bestätigen-Schaltfläche - Ja und Nein, dimmen Sie den Hintergrund, während die QuickInfo angezeigt wird, und fügen Sie HTML-Elemente hinzu zum Inhalt Ich denke, Sie sollten die Demo-Seite wirklich ausprobieren.

Aria-Tooltip - Dieses jQuery-Plugin ist eine weitere QuickInfo mit integrierter Eingabehilfefunktion und ist WAI-ARIA 1.1-kompatibel. Es reagiert auf eine Weise, die Sie können bieten verschiedene Konfigurationen für unterschiedliche Ansichtsfenstergrößen. Aria-Tooltip ist als NPM-Modul mit dem Namen verfügbar t-Aria-Tooltip.

Toolbar.js - Während das andere jQuery-Plugin möglicherweise nur einfachen Text oder HTML-Inhalt innerhalb eines Tooltips anzeigt, ist dies der Fall Das jQuery-Plugin erstellt eine Symbolleiste. Die QuickInfo enthält zwei oder mehr Links mit einem Symbol, für das normalerweise eine Aktion ausgeführt wird klicken, wie jede Symbolleiste. Schauen Sie sich die Dokumentation und Beispiele an.

VueJS

V-Tooltip - V-Tooltip ist eine Vue.js-Komponente, die von Popper.js unter der Haube betrieben wird. Es bietet eine neue Direktive benannt v-Tooltip die zu jedem Element hinzugefügt werden kann, um eine QuickInfo zu erstellen. Das v-Tooltip kann den Tooltip-Inhalt oder die Optionen enthalten. Abgesehen von der Sitte v-Tooltip Direktive können Sie den Tooltip auch mit der v-popover Komponente. Mit dieser Komponente können Sie fügen Sie komplexere Inhalte in die QuickInfo ein mit Vue.js-Komponente oder HTML.

Vue-Bulma-Tooltip - Eine Vue.js-Komponente zum Erstellen von QuickInfos basierend auf dem Bulma UI Framework. Diese Bibliothek ist Bestandteil von Vue Bulma. Aber die Die Tooltip-Komponente steht als NPM-Modul mit dem Namen vue-bulma-tooltip dass Sie dies als eigenständige Komponenten verwenden können.

Vue-Direktive-Tooltip - Insgesamt ist sie der auf Popper.js basierenden V-Tooltip-Komponente ähnlich und bietet dieselbe aufgerufene Direktive v-Tooltip. Es scheint jedoch nicht das zu liefern v-popover Komponente.

Vue-Tippy - Diese Bibliothek fasst Tippy.js in eine Vue.js-Komponente ein. Es enthält eine benutzerdefinierte Vue.js-Direktive namens v-tippy das funktioniert wie ein HTML-Attribut; Wir können Inhalte für Tooltips oder die Optionen zum Anpassen hinzufügen. Es macht auch ein Benutzerdefinierte Vue.js-Komponente im Tooltip-Inhalt mithilfe von html Möglichkeit.

VueJS-Popover - Ein benutzerdefiniertes Vue.js mit einer benutzerdefinierten Direktive namens v-popover und zwei kundenspezifische Komponenten nämlich und Bietet Flexibilität für Entwickler zum Hinzufügen von QuickInfos in der Vue.js-Anwendung.

Vue-Hinweis - Ein Vue.js-Plugin, das Hint.css umgibt. Die Plugin-Funktionen v-hint-css Direktive zum Hinzufügen des Tooltips. Es bringt die gleichen Optionen wie Hint.css, Sie können sie also als JavaScript-Objekt oder als Vue.js-Modifikator hinzufügen.

ReactJS

Reagiere Joyride - Eine React-Komponente, um eine Reihe von Tooltips anzuzeigen Führen Sie neue Benutzer durch, um sich mit Ihrer neuen Anwendung vertraut zu machen.

Reagieren Sie Floater - Diese Bibliothek umschließt Popper.js in eine React-Komponente mit dem Namen Floater. Daher verfügt sie über dieselben großartigen Funktionen wie die von Floater. Sie können QuickInfos und Popup hinzufügen und auch mit dieser Komponente herumspielen durch diese Sandbox.

Autotip reagieren - Eine einfache React-Komponente mit der Funktion zur automatischen Positionierung (eact Autotip) passt die Position des Tooltips automatisch an wenn sich der verfügbare Platz um sie herum ändert.

Reagier Tippy - Erbaut auf Tippy.js und Popover.js. Diese Bibliothek führt ein QuickInfo Komponente, die Sie können in Ihre React-Anwendung aufnehmen.

Reaktion Hinweis - Eine React-Komponente, die Hint.css erweitert. Die Komponenten fügen einige Funktionen hinzu, die in Hint.css nicht verfügbar sind, wie z Auto-Position, Verzögerung und eine Rückruffunktion.

Mehr

Glut-Tooltips - Eine Ember.js-Komponente zum Erstellen von QuickInfos, die auf Popper.js basiert. Die Komponente wurde auch im Hinblick auf die Barrierefreiheit entwickelt und wird ständig weiterentwickelt, um etwa 508 zu erfüllen.

D3 Tipp - ein D3.js Plugin. D3.js ist eine JavaScript-Bibliothek für die Datenvisualisierung wie Diagramme, Karten, Diagramme usw. Mit diesem Plugin können Sie Tooltip über diesen Daten anzeigen.