Microtip - CSS Tooltip Library med indbyggede tilgængelighed funktioner

Du kan gøre en hurtig søgning på GitHub for at finde snesevis af brugerdefinerede værktøjstip-biblioteker. Og det lader til, at nye rammer internettet hver måned.

Microtip er en unik ressource, da den kører på rene CSS værktøjstips, tilbyder brugerdefineret æstetik, og den bruger kildekode, der er fuldt tilgængelig for alle brugere.

Hvis du aldrig har tænkt meget om tilgængelighed, kan Microtip ændre dit sind. Det er den perfekte blanding af rent design med funktionalitet for alle enheder, alle browsere og for brugere med større handicap.

På hjemmesiden finder du et download link til Microtip biblioteket sammen med en flok kode demoer.

Du kan få denne opsætning via en pakkehåndtering, en direkte download eller ved at trække den direkte fra en CDN. Det leveres med en CSS-fil og det er stort set alt hvad du behøver.

Når du har tilføjet Microtip til din side, kan du begynde at tilføje værktøjstips på sideelementer. Disse er fuldt kompatibel med WAI så de overholder moderne adgangsstandarder perfekt.

Her er en prøveværktøjskode, der er knyttet til et knapelement med en brugerdefineret position:

Ikke meget kode rigtigt?

Dette bibliotek er super letvægt med i alt 1KB minificeret. Det er bare vildt i betragtning af, hvor meget du får med disse værktøjstips.

Brugerdefinerede CSS-egenskaber kan sendes gennem HTML-attributter for at definere skriftstørrelsen, overgangsstilen, lempelsen og mange andre indstillinger.

Du kan også overskriv CSS direkte for at gøre værktøjstips større med forskellige farver eller skrifttyper.

Se på tilpasningsafsnittet på hovedsiden for flere detaljer. Alt går gennem HTML og CSS, så du ikke behøver det enhver scripting viden at få det til at fungere.

Microtip er super nem at opsætte og tilpasse så hvis du i det mindste kender basic frontend-kodning, vil du være i orden.

Men se på GitHub repo for mere setup info & tag en kopi af stilarket.

Hvis du har spørgsmål eller forslag til nye funktioner, kan du også sende en linje til skaberen på Twitter @_ighosh.