I tooltips nel web design: a cosa servono e come si utilizzano

Transcript

1 I tooltips nel web design: a cosa servono e come si utilizzano Oggi voglio parlarvi dei tooltips, ovvero le finestre pop up che si aprono nel momento in cui posizioniamo il mouse su un immagine o su un testo. Letteralmente, i tooltip o hint o infotip, sono degli elementi grafici che si azionano nel momento in cui posizioniamo il mouse in un particolare punto (mousehover). Quando l utente passa il mouse in un determinato punto, senza cliccarci sopra, appare automaticamente un tooltip, cioè un piccolo box o finestra con informazioni aggiuntive. I tooltips non possono essere azionati sui dispositivi mobili e tablet perché su questi dispositivi non c è il cursore. Rappresentano una soluzione ottimale nel momento in cui dobbiamo inserire delle informazioni aggiuntive rispetto a quelle già inserite. Grazie ai nuovi standard, le tecniche per realizzare i tooltips sono migliorate e sono realizzati semplicemente con il codice html5 + css3. In particolare si utilizzano i pseudo elementi ::after e ::before per realizzare il particolare della freccia del tooltip. A cosa servono? A dare un anteprima di quello che vedremo in maniera più dettagliata cliccando poi sull immagine. Sono molto utilizzati all interno di mappe o di siti universitari o alberghi. Questa tecnica è utilizzata anche dai siti web che vendono le immagini o i video dando la possibilità all utente di avere un idea rapida e veloce della miniatura che viene ingrandita al mousehover con il tooltip. Vediamo prima di tutto alcuni esempi pratici molto ben riusciti. Università di Coimbra 1 / 5

2 Questo è il sito dell università di Coimbra che per mostrare gli uffici più importanti del suo edificio ha adottato la tecnica del tooltip. Con l azione del mousehover sulle iconcine gialle, elemento grafico che indica la presenza di informazioni aggiuntive, è possibile avere un particolare degli uffici con foto e descrizione. Cliccandoci ( mouseclick) possiamo poi andare a visitare direttamente la pagina di quell ufficio. FOTOLIA 2 / 5

3 Fotolia e tutti i siti che vendono immagini e video, utilizzano questa tecnica per mostrare l anteprima delle immagini in miniatura, dando la possibilità di visualizzarle in formato maggiore al mousehover. Tecnica è molto utile anche per i siti portfolio, se si presentano i propri lavori con una galleria di immagini in miniatura tipo formato 100X100px: al mousehover sarà possibile aggiungere ulteriori informazioni sui progetti, come per esempio la descrizione. Tutorial Oltre alla possibilità di creare i tooltips in css3 e visualizzarli al mousehover ci sono tantissime librerie jquery che permettono di realizzare questo effetto in maniera veloce e semplice. Su google puoi facilmente trovarle inserendo la parola chiave best tooltips library. Io ho usato per alcuni miei progetti una piccola libreria che si chiama ddimgtooltips.js e mi sono trovata molto bene. Vediamo in questo tutorial come realizzare dei tooltips su una mappa per mostrare i diversi appartamenti disponibili per la vendita sulla cartina di Milano. 3 / 5

4 DEMO #1 - STEP Come prima azione indispensabile dobbiamo scaricare la libreria ddimgtooltips.js sul sito del produttore e una versione aggiornata della libreria jquery.mins.js, per poi posizionarle tra il tag head della nostra pagina html. #2 - STEP Realizziamo la struttura della nostra pagina creando due box, uno per l immagine della mappa e l altro realizzato con una lista non ordinata che conterrà al nostro interno le voci di elenco con le nostre iconcine arancioni e l anchor tag al quale daremo l attributo rel che conterrà il riferimento della libreria javascript sui tooltips che realizzeremo. Ecco il codice della struttura: 4 / 5

5 Powered by TCPDF ( Your Inspiration Web #3 STEP Adesso è necessario modificare e personalizzare il file ddimgtooltip.js con i tooltip che vogliamo realizzare e quindi inserire le immagini e la descrizione e anche lo stile. L elemento tooltips [0], [1] ecc... rappresenta una sorta di identificativo e deve corrispondere all attributo rel inserito nella struttura della pagina. Come puoi notare abbiamo inserito: il percorso dell immagine la descrizione un po' di stile È possibile modificare ulteriormente lo stile e la posizione del box del tooltip tramite css utilizzando la classe.ddimgtooltip. Inoltre ho creato la freccetta bianca a sinistra del tooltip che è una delle sue caratteristiche principali semplicemente sfruttando il pseudo elemento ::before. Infine possiamo anche modificare lo stile della descrizione del tooltips in questo punto della libreria che contiene la classe.ddimgtooltip : Qui possiamo modificare l allineamento del testo, il padding, il margine, il font e così via. La demo può essere visualizzata qui e il pacchetto del codice completo qui. Conclusioni Utilizzando questa tecnica, otteniamo un bel risultato che migliora l usabilità del sito web, fornendo ai nostri utenti delle informazioni aggiuntive in maniera più rapida e dando la possibilità al nostro utente di decidere se queste informazioni sono importanti ed eventualmente poi approfondirle cliccando sul tooltip. Oltre all usabilità migliorano il design e l estetica della pagina. Cosa ne pensi di questa tecnica? L hai già utilizzata? Scrivilo nei commenti. 5 / 5