Opret reducerede værktøjstip i ren CSS med Wenk

Med et så underligt navn, ville du ikke forvente meget fra Wenk, en gratis CSS tooltip bibliotek. Alligevel er det et af de mindste biblioteker Du kan få måling under 1KB, når du gzipped.

Wenk bruger ren CSS med data-* egenskaber at skabe levende værktøjstips at du kan restylle og placere efter eget valg. Bedste af alt er det et helt gratis bibliotek med kildekoden tilgængelig på GitHub.

Disse lette værktøjstips er super enkle at tilføje til din hjemmeside. Du skal bare bruge Wenk.css fil tilføjet til din sideoverskrift, som du kan downloade fra GitHub repo.

Eller du kunne endda Tilføj CDN-filen som er vært på GitHubs CDN. Her er koden for det:

Eller hvis du er en npm / bower fan, kan du installere denne pakke fra terminalen.

Standardværktøjet til værktøjstip har ikke meget brugerdefinerede data. De lader dig vælg position og bredde, men du skal manuelt ændre CSS hvis du vil have dem stylet anderledes.

For eksempel vil du måske have en CSS-pil tilføjet til værktøjstip, der vises over værktøjstipelementet. Dette er ret nemt at oprette, men du skal scanne Wenk stylesheet til find den nøjagtige CSS klasse at udvide.

Her er en prøve af nogle standardkode til Wenk værktøjstips:

   Vink til højre!  

Den vigtigste Wenk destinationsside inkluderer levende demoer at du kan teste ved at svinge Disse er de mest grundlæggende værktøjstip du får, men de er perfekte til et bibliotek, der vejer mindre end en kilobyte.

En vigtig ting at overveje er browser support. Alle versioner af Chrome og Firefox skal fungere fint. Samme med Opera 12+ og Opera Mini v8 +. Men IE8 og IE10 synes at har problemer hvilket giver disse værktøjstips. Heldigvis er deres markedsandel faldende hurtigt, men det er noget at overveje, inden du bruger.

Jeg er stadig forbløffet over, hvor meget du kan gøre med så få KB'er. Wenk biblioteket er et testament til moderne frontend udvikling og det viser, at lidt kan gå langt.

Du kan grave gennem hele kilden på GitHub, sammen med levende demoer og kodeuddrag at oprette og oprette disse værktøjstips til dit eget websted.