Articoli Taggati ‘tooltips’

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. || Leggi altro »