de.hideout-lastation.com
Paradies Für Designer Und Entwickler


40+ Nützliche Tooltips Skripte mit CSS, JavaScript und jQuery

Ein interessantes UI-Element, Tooltips (auch Infotips genannt), lässt ein kleines Kästchen erscheinen, wenn der Mauszeiger über einem bestimmten Text oder Bild mit Informationen über das Element, über dem man schwebt, schwebt. Im Hinblick auf die Benutzerfreundlichkeit bieten QuickInfos den Benutzern die schnellste und einfachste Informationsquelle, ohne auf etwas klicken zu müssen .

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

CSS

Balloon.css - Balloon ist eine CSS-Bibliothek, die mit SasS und LESS erstellt wurde, um einen interaktiven Tooltip anzuzeigen . Der Inhalt und die Position des Tooltips sind über das data- konfigurierbar. Sie können den Tooltip links, rechts oder links-rechts anzeigen. Sie können sogar Emojis zum Inhalt hinzufügen . Balloon.css kann über NPM installiert werden oder von CDNJS geladen werden.

Simptip - Hergestellt mit SasS ermöglicht es, den Code neu zu konfigurieren und neu zu kompilieren, um Ihre Anforderungen zu erfüllen . Die Tooltip-Position und der Inhalt können über den Klassennamen und das data-tooltip Attribut konfiguriert werden. Simptip ist als NPM-, Yarn- und Bower-Paket verfügbar.

Hint.css - Hint.css ist eine der beliebtesten CSS-Bibliotheken zur Anzeige von QuickInfos. Sie wird von vielen beliebten Websites wie Fiverr, Webflow und Tridiv verwendet. Im Gegensatz zu den anderen beiden CSS-Bibliotheken verwendet Hint.css aria-label Sie können die Größe und Farbe über die Klassennamen mithilfe der BEM-Methode konfigurieren . Hint.css ist auf NPM, Bower und CDNJS verfügbar.

Microtip - Eine weitere großartige CSS-Bibliothek zum Erstellen von Tooltips mit dem Ziel "Accessibility". Microtip verwendet aria-label, um den Tooltip-Inhalt und das data- zur Konfiguration der Tooltip-Größe und -Position beizubehalten.

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

Wenk - Es sind nur 733 Bytes. Eine superleichte Bibliothek, die in einem supermodernen CSS mit CSSNext, LESS und SCSS geschrieben wurde und so die Stile nach Belieben anpassen und neu kompilieren kann. Wenk kann von NPM, Yarn und den folgenden kostenlosen CDN-Diensten heruntergeladen werden: rawgit.com und unpkg.com.

Tooltippy - Eine weitere leichtgewichtige CSS-Bibliothek mit einer Größe von nur etwa 1 KB. Tooltippy enthält mehrere vorgefertigte Themen zum Formatieren des Tooltips. Es ist mit einem CSS-Vorprozessoren namens Stylus geschrieben. Sehen Sie sich die Anleitung an, wie Sie diese Themen erweitern oder anpassen können .

ElegantTips - Diese Bibliothek enthält einige vordefinierte Designs, die mit den angegebenen Klassennamen geändert werden können. Im Gegensatz zu den anderen Bibliotheken, die auf HTML5- data- oder dem aria-label -Attribut beruhen, benötigt ElegantTips ein zusätzliches Element, das hinzugefügt wird, um den Tooltip zu bilden. Auf diese Weise können Sie dem Tooltip über den einfachen Text hinaus buchstäblich jeden beliebigen Inhalt hinzufügen .

Tootik - Nicht nur, dass diese CSS-Bibliothek das Stylsheet im CSS-, LESS- und SasS-Format bietet, es bietet auch eine einfach zu bedienende Benutzeroberfläche, um den Tooltip anzupassen . Sie können den von diesem Tool generierten HTML-Code einfach kopieren und einfügen. So einfach ist das.

VanilleJS

TippyJS - Powered by Popper.js, TippyJS bietet eine Fülle von Optionen zum Konfigurieren des Tooltips . Wir können die Animationen, den Tooltip-Pfeil, die Breite, die Größe, das Thema und vieles mehr anpassen. Es bietet auch Callback-Funktionen, mit denen Sie eine Funktion ausführen können , wenn der Tooltip ein- und ausgeblendet wird . Diese Funktionen machen TippyJS zu einer unserer leistungsstarken JavaScript-Bibliotheken auf unserer Liste, um einen Tooltip zu erstellen.

Darsin Tooltip - Diese Bibliothek bietet die grundlegende Implementierung eines Tooltips. Dennoch bietet es umfangreiche Optionen zum Konfigurieren des Tootip-Verhaltens und eine Reihe von Klassennamen zum Ändern der Tooltip-Darstellung . Der Tooltip funktioniert gut in älteren Browsern wie IE9 und, wenn nötig, IE8 mit ein paar Anpassungen.

Bubb - Bubb eignet sich möglicherweise gut für fortgeschrittene JavaScript-Benutzer. Mit seinen umfangreichen APIs können Sie neben der Anzeige von einfachem Text programmatisch einen komplexeren HTML-Inhalt zur QuickInfo hinzufügen. Es ist ziemlich cool; Sie können auf die Docs die Beispiele verweisen.

Popper - Enthält eine technische Abstraktion, um etwas zu erstellen, das wie ein Tooltip, ein Popover und Drop-downs "springt" . TippyJS verwendet es als Bibliotheksgrundlage und wird von großen Namen im Web wie Bootstrap, Microsoft und Atlassian verwendet.

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

Position.js - Eine weitere hervorragende 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 right, left, bottom, left-center, right-end, bottom-center, etc. Darüber hinaus ist es auch intelligent genug, dass es die Tooltip-Position basierend auf dem verfügbaren Platz um den Tooltip anpassen konnte. Schau dir die Demo an.

MouseTip - Diese JavaScript-Bibliothek erstellt einen Tooltip, der sich entlang der Cursorposition bewegt . Der Tooltip wird mit einem nicht standardmäßigen mousetip- Attribut mousetip-, anstatt das HTML5- data- . Mousetip ist als NPM-Modul verfügbar.

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

MTip - Eine JavaScript-Bibliothek für Tooltip mit guter Browserkompatibilität . Es ist kompatibel mit IE8, voll anpassbar durch die Optionen, und Sie können den Tooltip zu jedem Element sogar auf einem img (einem Bildelement) hinzufügen.

Bubblesee - eine leichte JavaScript-Bibliothek, die eine einfache Funktionalität eines "Tooltips" bietet. Es ist einfach, die JavaScript-Bibliothek ohne komplizierte Optionen zum Anpassen der Ausgabe zu verwenden. Eine Sass-Datei wird bereitgestellt, wenn Sie die QuickInfo-Darstellung ändern möchten. Schau dir die Demo an.

Tipp - Mit der modernen JavaScript-Syntax ES6 ist Tipfy nur 2 KB groß . Die Bibliothek stellt zwei Versionen von Dateien zur Verfügung: tipfy.min.js die das Skript mit moderner ES6-Syntax tipfy.es5.min.js, und tipfy.es5.min.js wenn Sie Kompatibilität mit älteren Browsern benötigen. Es verwendet data-, um den Tooltip anzupassen ; Die data-tipfy-side wird zum Beispiel verwendet, um die data-tipfy-text Richtung data-tipfy-text, und das data-tipfy-text Attribut zum Hinzufügen des data-tipfy-text Inhalts.

jQuery

Tooltipster - Diese Bibliothek bietet umfangreiche Optionen zum Anpassen von fast allem, wie z. B. Thema, Animation, Touch-Unterstützung, Inhalt, Öffnungs- und Schließungstrigger usw. Außerdem bietet sie benutzerdefinierte Ereignislistener und Callbacks, sodass Entwickler den Tooltip mit benutzerdefinierten Funktionen erweitern können . Als jQuery-Plugin funktioniert der Tooltip auch in älteren Browsern wie IE6, abhängig von der verwendeten jQuery-Version .

Protip - Ein weiteres umfangreiches jQuery-Plugin, Protip unterstützt 49 Positionen, HTML für den Tooltip-Inhalt, Icon-Unterstützung, benutzerdefinierte Rückrufe und vieles mehr. Protip bietet eine GUI, mit der Sie den Tooltip einfach anpassen können.

PowerTip - Dieses jQuery-Plugin enthält auch Optionen und APIs, die Entwicklern verschiedene Möglichkeiten zum Implementieren der Tooltips bieten. Es unterstützt die Tastaturnavigation ; Das Popup wird angezeigt, wenn Elemente mit der Tab- Tastatur navigiert werden. PowereTip ist als NPM-Modul verfügbar . Es kann mit RequireJS und Browserify verwendet werden.

Accessible Aria Tooltip - Ein jQuery-Plugin mit eingebauter Accessibility-Funktion. Der Tooltip zeigt ein Dialogfeld mit einem Titel, mehrzeiligen Text und einer Schließen-Schaltfläche an . Es ist eines der eigenen auf unserer Liste.

TipsJS - Ein einfaches jQuery-Plugin, aber es bringt ziemlich markante Funktionen. Der Tooltip-Inhalt wird mit einem data-tooltip Attribut festgelegt . Darüber hinaus können wir den Inhalt mit Sonderzeichen umhüllen, um den Inhalt ähnlich der Markdown-Formatierung zu formatieren. Wir können *, um den Inhalt fett zu machen, ~ für kursiv und ^ für Überschrift.

Dark Tooltip - Diese Bibliothek bietet einige nützliche Funktionen, um den Tooltip zu aktivieren. Zum Beispiel können wir eine Bestätigungsschaltfläche hinzufügen - Ja und Nein, den Hintergrund abblenden, während die QuickInfo angezeigt wird, und HTML-Elemente zum Inhalt hinzufügen . Ich denke, du solltest wirklich die Demo-Seite ausprobieren.

Aria Tooltip - Ein weiterer Tooltip mit eingebauter Accessibility-Funktion, dieses jQuery-Plugin ist WAI-ARIA 1.1-konform. Es reagiert so, dass Sie verschiedene Konfigurationen für verschiedene Darstellungsfeldgrößen bereitstellen können . Aria Tooltip ist als NPM-Modul mit dem Namen t-aria-tooltip tooltip verfügbar.

Toolbar.js - Während das andere jQuery-Plugin nur einfachen Text oder HTML-Inhalt innerhalb eines Tooltips anzeigt, erstellt dieses jQuery-Plugin eine Symbolleiste . Der Tooltip enthält zwei oder mehr Links mit einem Symbol, das normalerweise eine Aktion beim Klicken ausführt, wie jede andere 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 stellt eine neue Direktive namens v-tooltip die zu jedem Element hinzugefügt werden kann, um einen Tooltip zu erstellen . Der v-tooltip enthält möglicherweise den Tooltip-Inhalt oder die Optionen. Neben der benutzerdefinierten v-tooltip Anweisung können Sie die QuickInfo auch mit der v-popover Komponente v-popover . Mit dieser Komponente können Sie komplexeren Inhalt mit Vue.js-Komponente oder HTML in den Tooltip aufnehmen .

Vue-Bulma Tooltip - Eine Vue.js-Komponente zum Erstellen eines Tooltips auf Basis des Bulma UI-Frameworks. Diese Bibliothek ist Teil der Komponente von Vue Bulma. Die Tooltip-Komponente ist jedoch als NPM-Modul mit dem Namen vue-bulma-tooltip verfügbar, das Sie als eigenständige Komponenten verwenden können.

Vue-Directive-Tooltip - Insgesamt ähnelt es der auf Popper.js basierenden V-Tooltip-Komponente und bietet die gleiche Anweisung, die v-tooltip . Es scheint jedoch nicht die v-popover Komponente v-popover .

Vue-Tippy - Diese Bibliothek umschließt Tippy.js in eine Vue.js-Komponente. Es enthält eine benutzerdefinierte Vue.js-Anweisung namens v-tippy, die wie ein HTML-Attribut funktioniert. Wir können Inhalte für den Tooltipp oder die Optionen hinzufügen, um sie anzupassen. Außerdem wird eine benutzerdefinierte Vue.js-Komponente im Tooltip-Inhalt mithilfe der html Option html .

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

Vue-Hint - Ein Vue.js-Plugin, das Hint.css umschließt. Das Plugin enthält die Anweisung v-hint-css, um den Tooltip hinzuzufügen. Es enthält die gleichen Optionen wie Hint.css, sodass Sie sie als JavaScript-Objekt oder Vue.js-Modifikator hinzufügen können.

ReagierenJS

Reagiere Joyride - Eine React-Komponente, um eine Reihe von Tooltips anzuzeigen, die neue Benutzer dazu bringen, sich mit der neuen Anwendung vertraut zu machen .

React Floater - Diese Bibliothek umschließt Popper.js in eine React-Komponente namens Floater, sodass sie die gleichen großartigen Funktionen wie Floaters bietet. Sie können Tooltip und Popup hinzufügen, und Sie können auch mit dieser Komponente durch diese Sandbox spielen.

Reagieren Autotip - Eine einfache React-Komponente mit der Auto-Positionierung Funktion, ect Autotip wird automatisch die Position des Tooltip anpassen, wenn der verfügbare Raum um ihn herum ändert.

Tippy reagieren - Auf Tippy.js und Popover.js erstellt. Diese Bibliothek führt eine Tooltip Komponente ein, die Sie in Ihre React-Anwendung Tooltip können .

React Hint - Eine React-Komponente, die Hint.css erweitert. Die Komponenten fügen einige Funktionen hinzu, die in Hint.css nicht verfügbar sind, wie z. B. automatische Position, Verzögerung und eine Callback-Funktion .

Mehr

Ember Tooltips - Eine Ember.js-Komponente zum Erstellen von Tooltips, die auf Popper.js erstellt wurde. Die Komponente wurde auch im Hinblick auf Barrierefreiheit entwickelt und verbessert sich ständig, um den Anforderungen von rund 508 in diesem Bereich gerecht zu werden.

D3 Tip - ein D3.js-Plugin. D3.js ist eine JavaScript-Bibliothek für die Datenvisualisierung wie Diagramme, Karten, Diagramme, etc. Dieses Plugin ermöglicht es, Tooltips über diesen Daten zu zeigen.

10 Tools, um Kindern die Grundlagen der Programmierung beizubringen

10 Tools, um Kindern die Grundlagen der Programmierung beizubringen

Wir leben in einem digitalen Zeitalter, in dem Gadgets von Computern über Smartphones bis hin zu Tablets zu einem wesentlichen Teil unseres Lebens geworden sind. Auch Kinder greifen in diesen Tagen ein iPad auf und finden Apps wie ein Fisch zum Wasserholen . Da Kinder im Laufe der Zeit immer technisch versierter werden, gibt es keinen Grund, warum sie nicht die Grundlagen ihrer Lieblingstechnologie erlernen können.

(Tech- und Design-Tipps)

Atemberaubende Fotos von Jupiter von der NASA-Raumsonde Juno

Atemberaubende Fotos von Jupiter von der NASA-Raumsonde Juno

Die Juno-Sonde der NASA ist seit ihrer Ankunft am 4. Juli 2016 auf der Jagd nach Jupiter, dem größten Planeten im Sonnensystem, aktiv. Seither hat die Sonde Fotos von den zahlreichen Zyklonen und Stürmen des Planeten aufgenommen .Anfang dieses Jahres führte Junos Vorbeiflug über Jupiter zu einer Reihe von Fotos, die ein blau getöntes Gebiet auf dem Planeten zeigen, das von Zyklonen bedeckt ist. Dies

(Tech- und Design-Tipps)