Microtip - Libreria Tooltip CSS con funzioni di accessibilità native

Puoi fare una rapida ricerca su GitHub per trovare dozzine di librerie tooltip personalizzate. E sembra che quelli nuovi colpiranno il web ogni mese.

Microtip è una risorsa unica dal momento che viene eseguita con tooltip CSS puri, offre un'estetica personalizzata e utilizza il codice sorgente completamente accessibile per tutti gli utenti.

Se non hai mai pensato molto sull'accessibilità, allora Microtip potrebbe cambiare idea. È la miscela perfetta di design pulito con funzionalità per tutti i dispositivi, tutti i browser e per gli utenti con disabilità importanti.

Sulla homepage, troverai un link per il download alla libreria Microtip insieme a una serie di demo di codice.

È possibile ottenere questo setup tramite un gestore di pacchetti, un download diretto o estraendolo direttamente da un CDN. esso viene fornito con un file CSS e questo è fondamentalmente tutto ciò di cui hai bisogno.

Una volta aggiunto Microtip alla tua pagina, puoi iniziare ad aggiungere suggerimenti sui componenti della pagina. Questi sono pienamente conforme alla WAI quindi sono perfettamente conformi ai moderni standard di accessibilità.

Ecco un esempio di codice tooltip allegato a un elemento del pulsante con una posizione personalizzata:

Non c'è molto codice giusto?

Questa libreria è super leggera con un totale di 1 KB min. Questo è semplicemente pazzesco considerando quanto ottieni con questi tooltip.

Le proprietà CSS personalizzate possono essere passate attraverso gli attributi HTML per definire la dimensione del carattere, lo stile di transizione, l'andamento e molte altre impostazioni.

Puoi anche sovrascrivi il CSS direttamente per rendere più grandi i suggerimenti con diversi colori o caratteri.

Dai un'occhiata alla sezione di personalizzazione nella pagina principale per maggiori dettagli. Tutto funziona attraverso HTML e CSS, quindi non è necessario qualsiasi conoscenza di scripting per farlo funzionare.

Microtip è super facile da configurare e personalizzare quindi, se almeno conosci la codifica base del frontend, starai bene.

Ma date un'occhiata al repository GitHub per maggiori informazioni sull'impostazione e per prendere una copia del foglio di stile.

Se hai domande o suggerimenti per nuove funzionalità puoi anche rilasciare una riga al creatore su Twitter @_ighosh.