Crea descrizioni minime in Pure CSS con Wenk

Con un nome così strano, da cui non ti aspetteresti molto Wenk, un libero Libreria dei tooltip CSS. Eppure è una delle più piccole biblioteche puoi misurare a meno di 1KB quando gzip.

Wenk usa CSS puro con dati-* attributi creare tooltip dal vivo che puoi ricollocare e posizionare a tuo piacimento. Meglio di tutti, è una libreria completamente gratuita con codice sorgente disponibile su GitHub.

Questi tooltip leggeri sono molto semplici da aggiungere al tuo sito web. Hai solo bisogno del Wenk.css file aggiunto alla tua intestazione di pagina, che puoi scaricare dal repository GitHub.

O potresti persino aggiungi il file CDN che è ospitato sul CDN di GitHub. Ecco il codice per questo:

Oppure, se sei un fan npm / bower puoi installare questo pacchetto dal terminale.

I tag tooltip predefiniti non hanno molti dati personalizzati. Loro ti lasciano seleziona la posizione e la larghezza, ma devi cambia manualmente il CSS se li vuoi in stile diverso.

Ad esempio, potresti volere una freccia CSS aggiunta al suggerimento che appare sopra l'elemento tooltip. Questo è abbastanza semplice da creare ma dovrai setacciare il foglio di stile di Wenk su trova la classe CSS esatta per estendere.

Ecco un esempio di alcuni codice predefinito per i tooltip di Wenk:

   Wenk a destra!  

La pagina principale di Wenk include demo live che puoi testare in bilico. Questi sono i tooltip più basilari otterrai ma sono perfetti per una libreria che pesa meno di un kilobyte.

Una cosa importante da considerare è supporto per browser. Tutte le versioni di Chrome e Firefox dovrebbe funzionare bene. Stessa cosa con Opera 12+ e Opera Mini v8 +. Ma IE8 e IE10 sembrano avere problemi rendendo questi tooltip. Per fortuna, la loro quota di mercato è in forte calo, ma è qualcosa da considerare prima di utilizzare.

Sono ancora sorpreso di quanto puoi fare con così pochi KB. La libreria Wenk è una testimonianza del moderno sviluppo del frontend e mostra che un po 'può fare molto.

Puoi scavare attraverso il intera fonte su GitHub, insieme a demo live e frammenti di codice per configurare e creare questi suggerimenti per il tuo sito.