Microtip - Libreria Tooltip CSS con funzionalità 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 un codice sorgente completamente accessibile per tutti gli utenti.

Se non hai mai pensato molto sull'accessibilità, allora Microtip potrebbe cambiare idea. È la perfetta combinazione di design pulito e 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. Viene fornito con un file CSS ed è praticamente 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 conformi alla WAI in modo che siano 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 sovrascrivere i CSS direttamente per rendere le descrizioni dei comandi più grandi con colori o caratteri diversi.

Dai un'occhiata alla sezione di personalizzazione nella pagina principale per maggiori dettagli. Tutto funziona attraverso HTML e CSS quindi non hai bisogno di conoscenze di scripting per farlo funzionare.

Microtip è semplicissimo da configurare e personalizzare, quindi se conosci almeno la codifica di 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.