I tooltip sono degli strumenti, a corredo dell’interfaccia utente, utilizzati per fornire maggiori informazioni circa taluni elementi come ad esempio link e pulsanti. Lo scopo dei tooltip è quello, pertanto, di fornire suggerimenti all’utilizzatore circa specifiche funzionalità dell’interfaccia e il modo corretto con cui utilizzarle.
I tooltip, nell’ambito del web publishing, vengono solitamente generati mediante Javascript, pertanto non mancano i plugin Jquery per assolvere a questa funzionalità. In questa pagina vi mostriamo una raccolta dei più interessanti plugin per la gestione di tooltip attraverso la libreria jQuery.
Le nostre scelte
Tipr
Tipr visualizza dei tooltip molto accattivanti nonostante sia una libreria particolarmente leggera (3 KB CSS inclusi). I tooltip possono apparire sopra o sotto qualsiasi elemento HTML (span, immagini, ecc.). Tipr è open source e rilasciato sotto licenza MIT, ed è compatibile con tutti i browser moderni.
qTip 2
qTip 2 è un interessante plugin per jQuery che consente di generare dei tooltip. Il plugin supporta diverse tipologie di tooltip, tooltip modali e tecnologia Ajax.
Tooltipster
Tooltipster è un plugin jQuery leggero e facile da usare, che permette di creare dei tooltip su qualsiasi elemento della vostra pagina web. Il tooltip è customizzabile attraverso CSS ed utilizzando le varie opzioni previste dal plugin tra cui, ad esempio, la possibilità di scegliere tra vari temi, il tipo e la durata dell’animazione.
Tooltipsy
Tooltipsy è un plugin di jQuery per la gestione dei tooltip. La particolarità di questo plugin, secondo il suo autore, risiede nella sua grande adattabilità e nella facilità di personalizzazione di ogni aspetto grafico e funzionale.
Zebra Tooltip
Zebra Tooltip è un plugin per jQuery estremamente leggero (1,6 Kb nella versione compressa) che consente di creare e gestire dei tooltip all’interno della pagina. Il risultato grafico è accattivante ed ampiamente customizzabile.
Non utilizza immagini ma solo codice CSS ed è possibile definire la posizione del tooltip. Testato e funzionante su tutti i principali browser.
jTip
jTip è un plugin jQuery per creare tooltip all’interno di una pagina web. La caratteristica peculiare di questa soluzione è che è basata su Ajax e pertanto il contenuto del tooltip può essere generato da una sorgente esterna alla pagina.
TipTip
TipTip è un plugin jQuery molto leggero (3,5 Kb) che consente di creare nella pagina dei tooltip semplici ed eleganti. Il risultato grafico è personalizzabile tramite CSS.
vTip
Vtip è progettato per fornire una soluzione ultraleggera (pochi bytes) per creare tooltips sfruttando la potenza del framework jQuery. L’archivio zip include tutto il necessario (compresa una pagina di esempio) per lavorare.
Utilizzando questo plugin tutti gli elementi con classe "vtip" saranno dotati di un tooltip a comparsa in cui verrà mostrato il contenuto dell’attributo title del tag.
LeviTip
Un ottimo plugin per la libreria JQuery che consente di creare con facilità dei tooltip da associare al passaggio del mouse o al click su un dato elemento (ad esempio link ed immagini).
blipIT Dialog
blipIT Dialog è un’estensione per jQuery che mette a disposizione le funzionalità necessarie per minimizzare e massimizzare finestre di dialogo tramite semplici operazioni di Drag & Drop. Per il suo utilizzo richiede l’inclusione del jQuery UI Dialog Box.
Grumble.js
Grumble.js è un plugin per il framework JavaScript jQuery che permette di creare tooltips (fumetti) a forma di bubbles, uno dei vantaggi nell’utilizzo di questa estensione sta nel fatto che essa consente di superare i limiti imposti dalle coordinate nord, sud, est ed ovest per il posizionamento, il tooltips potranno essere infatti piazzati in un qualsiasi punto attorno ad un elemento per tutti i 360° disponibili.
Le bubbles vengono prodotte tramite un’immagine sprite e sarà Grumble.js a stabilire quale immagine dovrà essere utilizzata sulla base delle dimensioni del testo da mostrare (auto-magic size adjustment); i tooltips vengono associati ad effetti di comparsa e dissolvimento (fadeIn e fadeOut), l’utilizzatore avrà la possibilità di definire i tempi di visualizzazione dei tooltips e la loro eventuale auto-chiusura.
