Microtip - CSS Tooltip-bibliotek med inbyggda tillgänglighetsfunktioner
Du kan göra en snabbsökning på GitHub för att hitta dussintals anpassade verktygstipsbibliotek. Och det verkar som om nya träffade webben varje månad.
Microtip är en unik resurs eftersom den körs på rena CSS-verktygstips, erbjuder anpassad estetik, och den använder källkod som är fullt tillgänglig för alla användare.
Om du aldrig har tänkt mycket om tillgänglighet kan Microtip ändra dig. Det är den perfekta blandningen av ren design med funktionalitet för alla enheter, alla webbläsare och för användare med stora störningar.
På hemsidan hittar du en länk till Microtip-biblioteket tillsammans med en massa koddemoder.
Du kan få denna inställning via en pakethanterare, en direktladdning eller genom att dra den direkt från en CDN. Det kommer med en CSS-fil och det är i princip allt du behöver.
När du har Microtip lagt till på din sida kan du börja lägga till verktygstips på sidelement. Dessa är fullt kompatibel med WAI så de överensstämmer med moderna tillgänglighetskrav perfekt.
Här är en provverktygstypkod kopplad till ett knappelement med en anpassad position:
Inte mycket kod rätt?
Detta bibliotek är super lätt med totalt 1KB minifierad. Det är bara galet med tanke på hur mycket du får med dessa verktygstips.
Anpassade CSS-egenskaper kan skickas genom HTML-attribut för att definiera teckensnittstorlek, övergångsstil, lättnad och många andra inställningar.
Du kan också skriv över CSS direkt för att göra verktygstips större med olika färger eller teckensnitt.
Ta en titt på anpassningsdelen på huvudsidan för mer information. Allt går igenom HTML och CSS så att du inte behöver någon skriptkunskap för att få detta att fungera.
Microtip är super lätt att installera och anpassa så om du åtminstone vet grundläggande frontend kodning kommer du att bli bra.
Men ta en titt på GitHub repo för mer installationsinformation och ta en kopia av stilarket.
Om du har frågor eller förslag på nya funktioner kan du också släppa en linje till skaparen på Twitter @_ighosh.
