Erstellen Sie mit Wenk reduzierte Tooltips in Pure CSS

Mit einem so seltsamen Namen würde man nicht viel erwarten Wenk, eine kostenlose CSS-Tooltip-Bibliothek. Aber es ist eine der kleinsten Bibliotheken Sie können unter 1 KB messen, wenn Sie gekippt werden.

Wenk verwendet reines CSS mit Daten-* Attribute erschaffen Live-Tooltips dass Sie nach Ihren Wünschen umgestalten und positionieren können. Das Beste ist, dass es eine komplett kostenlose Bibliothek ist, deren Quellcode auf GitHub verfügbar ist.

Diese leichten Tooltips lassen sich ganz einfach in Ihre Website einfügen. Sie brauchen nur die Wenk.css Datei zu Ihrem Seitenkopf hinzugefügt, die Sie vom GitHub-Repo herunterladen können.

Oder du könntest es sogar Fügen Sie die CDN-Datei hinzu das auf GitHub's CDN gehostet wird. Hier ist der Code dafür:

Wenn Sie ein npm / bower-Fan sind, können Sie dieses Paket installieren vom Terminal aus.

Die Standard-QuickInfo-Tags enthalten nicht viele benutzerdefinierte Daten. Sie lassen dich Wählen Sie die Position und die Breite, aber du musst CSS manuell ändern wenn Sie möchten, dass sie anders gestaltet werden.

Beispielsweise möchten Sie, dass ein CSS-Pfeil in die QuickInfo eingefügt wird, die über dem Tooltip-Element angezeigt wird. Dies ist ziemlich einfach zu erstellen, aber Sie müssen das Wenk-Stylesheet durchsuchen Finden Sie die genaue CSS-Klasse erweitern.

Hier einige Beispiele Standardcode für Wenk-Tooltips:

   Wenk nach rechts!  

Die Haupt-Landingpage von Wenk beinhaltet Live-Demos dass Sie durch Schweben testen können. Diese sind die grundlegendsten Tooltips Sie erhalten aber eine Bibliothek, die weniger als ein Kilobyte wiegt.

Eine wichtige Sache zu berücksichtigen ist Browser-Unterstützung. Alle Versionen von Chrome und Firefox sollte gut funktionieren. Gleiches gilt für Opera 12+ und Opera Mini v8 +. Aber IE8 und IE10 scheinen zu Probleme haben Rendern dieser Tooltips. Zum Glück sinkt ihr Marktanteil schnell, sollte jedoch vor der Verwendung berücksichtigt werden.

Ich bin immer noch erstaunt, wie viel Sie mit so wenigen KBs machen können. Die Wenk-Bibliothek zeugt von moderner Frontend-Entwicklung und zeigt, dass ein wenig weit gehen kann.

Sie können durch die graben gesamte Quelle auf GitHub, zusammen mit Live-Demos und Code Ausschnitte Einrichten und Erstellen dieser Tooltips für Ihre eigene Website.