back to top

11 tooltip con jQuery

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

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

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

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

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

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

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

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

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.

Altri contenuti interessanti

Pubblicità
Massimiliano Bossi
Massimiliano Bossi
Stregato dalla rete sin dai tempi delle BBS e dei modem a 2.400 baud, ho avuto la fortuna di poter trasformare la mia passione in un lavoro (nonostante una Laurea in Giurisprudenza). Adoro scrivere codice e mi occupo quotidianamente di comunicazione, design e nuovi media digitali. Orgogliosamente "nerd" sono il fondatore di MRW.it (per il quale ho scritto centinaia di articoli) e di una nota Web-Agency (dove seguo in prima persona progetti digitali per numerosi clienti sia in Italia che all'estero).

Leggi anche...

Il file manifest.json: cos’è e a cosa serve

Il file manifest.json è un componente chiave nelle applicazioni web moderne,...

Infinite scroll, come programmarlo su AMP e su Web con Javascript

L'infinite scroll è una tecnica di design e navigazione...

Codice Fiscale: 5 javascript per la verifica e il calcolo

Il codice fiscale è un identificativo tributario univoco che...

Math.ceil() – Arrotondare per eccesso con Javascript

Il metodo ceil() dell'oggetto Math di Javascript è utilizzato...

Minificare Javascript: librerie e strumenti online per comprimere il sorgente JS

La minificazione è un processo abbastanza diffuso nell'implementazione delle...

Javascript: svuotare un campo input o una textarea con un click

Quando si fornisce agli utenti un modulo per l'inserimento...
Pubblicità