Microtip - CSS Tooltip-bibliotheek met ingebouwde toegankelijkheidsfuncties

Je kunt snel op GitHub zoeken om tientallen aangepaste tooltip-bibliotheken te vinden. En het lijkt erop dat er elke maand nieuwe websites op het web verschijnen.

Microtip is een unieke bron omdat het werkt op pure CSS-tooltips, aangepaste esthetiek biedt en broncode gebruikt die volledig toegankelijk voor alle gebruikers.

Als je nog nooit goed hebt nagedacht over toegankelijkheid, kan Microtip van gedachten veranderen. Het is de perfecte mix van schoon ontwerp met functionaliteit voor alle apparaten, alle browsers en voor gebruikers met ernstige beperkingen.

Op de startpagina vindt u een downloadkoppeling naar de Microtip-bibliotheek samen met een aantal codedemo's.

U kunt deze configuratie verkrijgen via een pakketbeheerder, een directe download of door deze rechtstreeks van een CDN te trekken. Het wordt geleverd met één CSS-bestand en dat is eigenlijk alles wat je nodig hebt.

Nadat u Microtip aan uw pagina hebt toegevoegd, kunt u beginnen met het toevoegen van tooltips aan pagina-elementen. Dit zijn volledig compatibel met de WAI dus voldoen ze perfect aan de moderne toegankelijkheidsnormen.

Hier is een voorbeeld van een tooltipcode gekoppeld aan een knopelement met een aangepaste positie:

Niet veel code goed?

Deze bibliotheek is superlichtgewicht met een totaal van 1 KB verkleind. Dat is gewoon gek gezien hoeveel je krijgt met deze tooltips.

Aangepaste CSS-eigenschappen kunnen door HTML-kenmerken worden doorgegeven om de lettergrootte, overgangsstijl, versoepeling en tal van andere instellingen te definiëren.

Je kan ook overschrijf de CSS rechtstreeks om tooltips groter te maken met verschillende kleuren of lettertypen.

Bekijk het gedeelte met aanpassingen op de hoofdpagina voor meer informatie. Alles loopt via HTML en CSS, dus je hebt het niet nodig enige kennis van scripting om dit te laten werken.

Microtip is super eenvoudig in te stellen en aan te passen dus als je op zijn minst de basis-codering kent, komt alles goed.

Maar kijk eens naar de GitHub-repo voor meer instellingsinformatie en om een ​​kopie van de stylesheet te pakken.

Als u vragen of suggesties voor nieuwe functies heeft, kunt u ook een lijn naar de maker laten vallen op Twitter @_ighosh.