Opprett reduserte verktøytips i Pure CSS med Wenk
Med et så merkelig navn, ville du ikke forvente mye fra Wenk, en gratis CSS tooltip bibliotek. Likevel er det en av de minste biblioteker Du kan få måling under 1KB når gzipped.
Wenk bruker ren CSS med data-* egenskaper å lage live verktøytips at du kan restylle og plassere etter eget ønske. Best av alt, det er et helt gratis bibliotek med kildekoden tilgjengelig på GitHub.
Disse lette verktøytipsene er super enkle å legge til på nettstedet ditt. Du trenger bare Wenk.css fil lagt til i sidens overskrift, som du kan laste ned fra GitHub repo.
Eller, du kan til og med legg til CDN-filen som er vert på GitHubs CDN. Her er koden for det:
Eller, hvis du er en npm / bower fan, kan du installere denne pakken fra terminalen.
Standard verktøytip-koder har ikke mye tilpassede data. De lar deg velg posisjon og bredde, men du må Endre CSS manuelt hvis du vil ha dem stylet annerledes.
For eksempel vil du kanskje ha en CSS-pil lagt til verktøytipset som vises over verktøytipselementet. Dette er ganske enkelt å lage, men du må skanne Wenk stilark til finn den eksakte CSS-klassen å forlenge.
Her er et utvalg av noen standardkode for Wenk-verktøytips:
Vink til høyre! Den viktigste Wenk destinasjonssiden inkluderer live demoer som du kan teste ved å svinge. Disse er de mest grunnleggende verktøytipsene du får, men de er perfekte for et bibliotek som veier mindre enn en kilobyte.
En viktig ting å vurdere er nettleserstøtte. Alle versjoner av Chrome og Firefox skal fungere fint. Samme med Opera 12+ og Opera Mini v8 +. Men IE8 og IE10 synes å har problemer gjengir disse verktøytipsene. Heldigvis går markedsandelen raskt, men det er noe å vurdere før du bruker.
Jeg er fortsatt overrasket over hvor mye du kan gjøre med så få KBer. Wenk-biblioteket er et testament til moderne frontendutvikling, og det viser at litt kan gå langt.
Du kan grave gjennom hele kilden på GitHub, sammen med live demoer og kodebiter å sette opp og opprette disse verktøytipsene for ditt eget nettsted.
