Tooltip in jQuery

Una raccolta di plugin jQuery per gestire i tooltip all'interno del sito.

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.

  • 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.

    E' disponibile una demo a questa 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.

  • 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.

    E' disponibile una demo a questa pagina.

  • 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.

    E' disponibile una demo a questa pagina.

  • 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.

    E' disponibile una demo a questa pagina.

  • 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.

  • 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.

  • 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.

    E' disponibile una demo a questa pagina.

  • 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.

  • 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).

  • 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.

I commenti degli utenti

I commenti sono sottoposti alle linee guida di moderazione e prima di essere visibili devono essere approvati da un moderatore.