Maak verkorte tooltips in Pure CSS met Wenk

Met zo'n vreemde naam zou je niet veel verwachten van Wenk, een gratis CSS tooltip bibliotheek. Toch is het een van de kleinste bibliotheken je kunt meten onder 1 KB als je gzipt.

Wenk gebruikt pure CSS met gegevens-* attributen maken live tooltips dat je kunt restylen en naar wens kunt positioneren. Het beste van alles is dat het een volledig gratis bibliotheek is met broncode die beschikbaar is op GitHub.

Deze lichtgewicht tooltips zijn supereenvoudig om toe te voegen aan uw website. Je hebt alleen de Wenk.css het dossier toegevoegd aan uw paginakop, die je kunt downloaden van de GitHub repo.

Of je zou zelfs kunnen voeg het CDN-bestand toe die wordt gehost op het CDN van GitHub. Hier is de code voor dat:

Of, als u een fan van npm / bower bent, kunt u dit pakket installeren van de terminal.

De standaardtooltip-tags hebben niet veel aangepaste gegevens. Ze laten je selecteer de positie en de breedte, maar je moet verander de CSS handmatig als je ze anders anders wilt laten stylen.

U wilt bijvoorbeeld misschien een CSS-pijl toevoegen aan de knopinfo die boven het knopinfo-element wordt weergegeven. Dit is vrij eenvoudig om te maken, maar u moet het Wenk-stylesheet doorzoeken vind de exacte CSS-klasse uitbreiden.

Hier is een voorbeeld van wat standaard code voor Wenk tooltips:

   Wenk aan de rechterkant!  

De belangrijkste bestemmingspagina van Wenk omvat live demo's die je kunt testen door te zweven. Dit zijn de meest elementaire tooltips je krijgt, maar ze zijn perfect voor een bibliotheek die minder dan een kilobyte weegt.

Een belangrijk ding om te overwegen is ondersteuning voor browsers. Alle versies van Chrome en Firefox zou goed moeten werken. Hetzelfde met Opera 12+ en Opera Mini v8 +. Maar IE8 en IE10 lijken dit wel te doen problemen hebben het weergeven van deze tooltips. Gelukkig daalt hun marktaandeel snel, maar het is iets om te overwegen alvorens te gebruiken.

Ik ben nog steeds verbaasd hoeveel je kunt doen met zo weinig kennisbanken. De Wenk-bibliotheek is een bewijs van moderne front-end ontwikkeling en het laat zien dat een beetje een lange weg kan gaan.

Je kunt door de hele bron op GitHub, samen met live demo's en codefragmenten om deze tooltips voor uw eigen site in te stellen en te maken.