Un tooltip, un minuscolo elemento dell’interfaccia che o salva l’utente o lo infastidisce a morte. Passi il cursore su un’icona, ti aspetti un suggerimento e invece ottieni: un riquadro vuoto, testo troncato o un popup che è scappato oltre il bordo dello schermo.

Scrivere tooltip da zero a mano significa lottare con posizionamento, z-index, design responsive e animazioni. Le librerie già pronte risolvono tutto questo con un paio di righe di codice. Ma quale scegliere quando il mercato offre decine di opzioni, da microscopici snippet CSS a veri e propri framework per tour guidati del prodotto?

Abbiamo raccolto 21 plugin open source per tooltip in JavaScript, jQuery e puro CSS, con screenshot dal vivo e analisi oneste delle funzionalità. Ecco gli strumenti per ogni scenario: un tooltip rapido per una landing page, un tooltip con contenuto HTML per un’applicazione web e l’onboarding passo passo per un SaaS.

💡 Panoramica rapida:

• Scegli una categoria: CSS puro, jQuery o vanilla JS.
• Decidi cosa inserire all’interno: solo testo o HTML con immagini e pulsanti.
• Verifica il posizionamento automatico: così il tooltip non esce dai bordi dello schermo.
• Per i tour guidati del prodotto, prendi Intro.js o Hopscotch, sono pensati per l’onboarding.

Tabella riepilogativa: 21 plugin in 30 secondi

1. Tippy.js

Tippy.js è lo standard de facto per i tooltip nel frontend moderno. La libreria dello sviluppatore atomiks è costruita sopra Popper.js (poi Floating UI) e offre un posizionamento impeccabile: il tooltip evita da solo i bordi dello schermo, si capovolge e si adatta al viewport.

All’interno, tutto ciò che serve per una UI seria: animazione tramite transizioni CSS, tooltip interattivi (puoi cliccare sul contenuto senza che si chiuda), inseguimento del cursore, tooltip annidati e rendering lazy. Supporta React, Vue e DOM puro.

Nella nostra esperienza, conviene passare a Tippy.js quando un progetto supera lo zoo di jQuery: la libreria elimina gran parte dei grattacapi di posizionamento senza una sola riga di CSS manuale.

Pro: albero delle dipendenze minimo, tipizzazione TypeScript nativa, documentazione con esempi dal vivo. Contro: sproporzionato per un semplice tooltip testuale su una landing page; dimensione del bundle ~30 KB (anche se il tree-shaking aiuta).

🔗 Tippy.js su GitHub🔗 Documentazione e demo

2. Tooltipster

Tooltipster è un veterano tra i plugin jQuery per tooltip che non è diventato una zucca. La libreria è attiva dal 2012 e riceve ancora aggiornamenti. La caratteristica principale sono quattro temi di stile già pronti (default, light, borderless, punk) più la possibilità di crearne di propri tramite CSS.

Tooltipster gestisce contenuti HTML, caricamento AJAX, trigger multipli (hover, click, focus, chiamata programmatica), timer di mostra/nascondi e callback per ogni fase del ciclo di vita. Un plus a parte è il supporto nativo per i dispositivi touch: un tap sull’elemento mostra il tooltip, un tap ripetuto lo nasconde.

Nella pratica, Tooltipster si inserisce bene nei progetti su WordPress e nello stack jQuery, dove importare un bundle moderno da npm è scomodo: basta collegare lo script, configurare le opzioni e tutti i link con title diventano tooltip curati.

Pro: plugin maturo dal comportamento prevedibile, documentazione eccellente, supporto touch. Contro: legato a jQuery (nel 2026 questa è già una dipendenza che molti vogliono rimuovere).

🔗 Tooltipster su GitHub

3. CSS Tooltip

Tooltip minimalista in puro CSS: un elemento HTML con data-tooltip, pseudo-elementi ::before e ::after per la freccia e lo sfondo, più una transizione fluida all'hover. Niente JavaScript, non servono nemmeno gestori di eventi.

La soluzione è adatta a contenuti statici: blog, documentazione, landing page. Pesa meno di un kilobyte, non richiede dipendenze e non incide sul First Input Delay. Basta copiare lo snippet CSS nel progetto e inserire gli attributi data.

Pro: zero JS, performance immediate, facile personalizzare colori e spaziature. Contro: solo testo, nessun posizionamento automatico, comportamento limitato su mobile (niente hover).

4. Tipr

Tipr è un piccolo plugin jQuery (meno di 2 KB minificati) che fa esattamente una cosa: mostra un tooltip a comparsa quando si passa il mouse su un qualsiasi elemento HTML. Design piatto, senza grazie, configurazione minima tramite attributi data.

Ideale quando serve qualcosa che «funzioni e basta» senza astrazioni inutili. Supporta quattro posizioni, classi personalizzate e cambio del trigger. Il nostro consiglio è di usare Tipr per piccoli progetti dove jQuery è già presente e non si vuole aggiungere una dipendenza separata per i tooltip.

Pro: dimensioni microscopiche, API semplice, non richiede configurazione. Contro: abbandonato dall'autore, posizionamento elementare (può essere tagliato al bordo dello schermo).

Tipr è disponibile su GitHub

5. CSS tooltip appear

Un'altra implementazione in puro CSS, questa volta con enfasi sull'animazione di comparsa. Il tooltip fuoriesce con un movimento fluido, con durata e curva di easing personalizzabili. Adatta a situazioni in cui la funzione conta meno dell'impatto visivo: portfolio, pagine promozionali, siti di presentazione.

Pro: animazione gradevole, puro CSS, nessuno script. Contro: solo testo, nessun posizionamento ai bordi dello schermo, nessuna interattività.

6. Grumble.js

Grumble.js si distingue visivamente: il tooltip è stilizzato come un fumetto e può ruotare attorno all'elemento target di 360 gradi con incrementi di 1°. Lo sviluppatore James Cryer ha creato il plugin specificamente per UI non standard dove un rettangolo normale risulterebbe fuori posto.

Il plugin non viene aggiornato da molti anni, ma come concept e per progetti personali resta interessante. Non lo metteremmo in produzione su un progetto live: versione di jQuery obsoleta nelle dipendenze e nessun supporto mobile.

Pro: design unico, controllo preciso dell'angolazione, animazione piacevole. Contro: non supportato, jQuery antiquato, nessun design responsivo.

🔗 Grumble.js su GitHub

7. Protip

Protip è un plugin jQuery che si è posizionato come «un tooltip per ogni situazione». Diversi skin (incluso il tema scuro), transizioni animate, quattro posizioni e supporto HTML. In base al repository, l'autore ha implementato un'API pensata per l'estendibilità: è possibile propagare le impostazioni a cascata e definire valori predefiniti globali.

Nella pratica, Protip è una solida opzione di fascia media per progetti jQuery. Non potente come Tooltipster, ma sufficiente per gli scenari di base.

Pro: diversi temi, API comoda, animazione. Contro: repository non aggiornato, documentazione scarna.

Protip è disponibile su GitHub

8. Tipped

Tipped è una libreria JavaScript leggera e senza dipendenze. Supporta diversi temi, dimensioni e varianti di interazione: hover, click, focus, chiamata manuale. Il posizionamento è fisso (quattro lati), senza riposizionamento automatico ai bordi; per interfacce semplici è sufficiente.

Va notato che la libreria non viene aggiornata da molto tempo e il supporto della community è minimo. Nel 2026, per un nuovo progetto consiglieremmo Tippy.js, ma se il progetto è già su Tipped e funziona, non ha senso cambiare.

Pro: nessuna dipendenza, API semplice, diversi temi. Contro: nessun posizionamento automatico, il progetto sembra abbandonato.

Tipped è disponibile su GitHub

9. Microtip

Microtip dello sviluppatore Indrashish Ghosh è una libreria di tooltip in puro CSS che pesa meno di 1 KB compresso. Accessibilità nativa (aria-label + role="tooltip"), animazione GPU (transform invece di top/left), font responsive.

Il nostro scenario preferito per Microtip sono le icone senza etichette in un pannello di amministrazione o in un'interfaccia: si aggiunge aria-label, una classe e l'utente ottiene un suggerimento senza una sola riga di JavaScript. La libreria è attivamente usata in progetti su GitHub (oltre 3.5k stelle), anche se non ci sono stati aggiornamenti significativi negli ultimi due anni.

Pro: ultra-leggera, pronta per l'accessibilità, non rallenta il rendering. Contro: solo testo, nessuna interattività, posizione fissa.

🔗 Microtip su GitHub

10. Auto Tooltips

Auto Tooltips è una libreria JavaScript che sceglie automaticamente la posizione ottimale per un tooltip in base allo spazio disponibile. A differenza di Microtip o CSS Tooltip, qui il suggerimento può spostarsi su un altro lato dell'elemento se non c'è abbastanza spazio al bordo dello schermo.

Visivamente, tooltip stilizzati con ombra e angoli arrotondati. La logica di posizionamento è scritta senza dipendenze esterne, l'intera libreria sta in pochi kilobyte.

Pro: posizionamento automatico, leggera, design elegante. Contro: repository inattivo, documentazione minima.

11. JBox

JBox non è solo un tooltip, ma un framework di dialogo universale basato su jQuery. Oltre ai suggerimenti a comparsa, gestisce finestre modali, notifiche (notice) e overlay a schermo intero. Ogni tipo di dialogo è un plugin separato all'interno di un'architettura comune.

Nella nostra esperienza, JBox è utile nei progetti in cui serve uno stile visivo uniforme per tutti gli elementi a comparsa. La libreria supporta contenuti AJAX, animazioni, callback e posizionamento responsive. Le dimensioni sono giustificate dalla funzionalità: circa 20 KB per un set completo di componenti di dialogo.

Pro: quattro tipi di dialogo in un unico pacchetto, buona documentazione, supporto attivo. Contro: dipendenza da jQuery, eccessivo se servono solo i tooltip.

🔗 JBox su GitHub

12. Wenk

Wenk (dall'hindi, "lucciola") è una libreria di tooltip CSS che usa attributi data per il posizionamento. Si può impostare la posizione (data-wenk="left"), la lunghezza e lo stile della freccia. Tutta la magia è in puro CSS, più un file JS opzionale per la selezione automatica della posizione.

Il peso è di circa 1.2 KB minificato. Un'ottima scelta quando Microtip sembra troppo minimalista e non si vuole includere Tippy.js.

Pro: attributi data per la posizione, helper JS leggero, design gradevole. Contro: nessun tooltip interattivo, posizionamento limitato a otto direzioni.

Wenk è disponibile su GitHub

13. Crumble

Crumble è un overlay basato su Grumble.js, che aggiunge un effetto a bolla che si "sbriciola" alla chiusura. Concetto visivamente interessante, ma la doppia dipendenza (jQuery + Grumble.js) e la totale assenza di aggiornamenti lo rendono esclusivamente un reperto storico.

Abbiamo incluso Crumble nella raccolta per completezza e varietà visiva, ma per un progetto reale cercate alternative più vive.

Pro: animazione di chiusura unica, attira l'attenzione. Contro: due dipendenze obsolete, non adatto alla produzione.

🔗 Grumble.js (dipendenza)

14. Intro.js

Intro.js non è più un tooltip, ma un vero e proprio framework per l'onboarding degli utenti. Con la libreria si creano guide passo passo: evidenziazione degli elementi, finestra a comparsa con spiegazione, pulsanti "Avanti"/"Fatto". Nessuna dipendenza, JavaScript puro.

Nel nostro test, Intro.js si è dimostrato lo strumento più maturo per i tour di prodotto: oltre 23k stelle su GitHub, codebase TypeScript, supporto per tour multi-pagina (con trasferimento di stato tra le pagine), personalizzazione tramite classi CSS e callback per ogni passo.

Pro: standard de facto per i tour di onboarding, sviluppo attivo, documentazione dettagliata. Contro: circa 45 KB, giustificati dalla funzionalità, ma eccessivi per un semplice tooltip.

🔗 Intro.js su GitHub🔗 Demo dal vivo

15. PowerTip

PowerTip di Steven Benner (autore di jQuery QueryBuilder) introduce un concetto interessante: un sistema di regole garantisce che sia visibile un solo tooltip alla volta sullo schermo. Questo risolve il classico problema che si verifica quando l'utente sposta rapidamente il cursore su più elementi e ottiene un pasticcio di suggerimenti sovrapposti.

Il plugin supporta markup complesso all'interno del tooltip (inclusi contenuti AJAX), trigger personalizzati e posizionamento in otto direzioni. Nei progetti jQuery, PowerTip è una delle opzioni più affidabili.

Pro: sistema di visualizzazione intelligente, contenuti HTML, funzionamento stabile. Contro: dipendenza da jQuery, il repository riceve aggiornamenti rari.

🔗 PowerTip su GitHub

16. Toolbar.js

Toolbar.js di Paul Kinzett adotta un approccio "tooltip come barra degli strumenti": la finestra a comparsa contiene non solo testo, ma pulsanti, icone, link. Lo scenario tipico è la selezione di testo su una pagina: appare un pannello con pulsanti "Copia", "Condividi", "Cerca".

Il plugin usa Popper.js per il posizionamento, il che garantisce un comportamento corretto ai bordi dello schermo. Il progetto ha raccolto oltre 2,3k stelle, ma non ci sono stati aggiornamenti significativi negli ultimi anni. A livello concettuale, Toolbar.js ha influenzato molti pattern UI moderni (i pannelli di selezione in stile Medium).

Pro: approccio unico "tooltip come pannello azioni", buon posizionamento. Contro: progetto fermo, legato a una vecchia versione di Popper.js.

🔗 Toolbar.js su GitHub

17. Simptip

Simptip è una libreria CSS per tooltip scritta in Sass usando mixin e variabili. Questo la rende comoda per i progetti in cui l'aspetto del tooltip deve corrispondere esattamente al design system: basta cambiare la variabile $bg-color e tutti i tooltip vengono ricolorati.

La libreria supporta frecce morbide e appuntite, quattro posizioni ed effetto di comparsa (fade-in). Il peso è minimo: il CSS compilato è di circa 2 KB.

Pro: variabili Sass per la personalizzazione, design pulito, leggero. Contro: niente contenuti HTML, progetto non aggiornato.

🔗 Simptip su GitHub

18. HubSpot Tooltip

HubSpot ha reso open source la propria libreria interna di tooltip, costruita su Tether (motore di posizionamento, predecessore di Popper.js) e Drop (libreria per elementi a discesa). La combinazione fornisce un sistema di tooltip potente e flessibile con posizionamento automatico.

Oggi HubSpot Tooltip ha più che altro un interesse storico: la libreria non è aggiornata, Tether è stato ufficialmente sostituito da Popper.js (e poi da Floating UI). Ciononostante, le scelte architetturali di HubSpot hanno influenzato le librerie moderne, e l'approccio stesso "motore di posizionamento + motore di visualizzazione" è diventato uno standard.

Pro: qualità del codice di livello industriale, buon posizionamento, supporto HTML. Contro: dipendenze obsolete (Tether), progetto fermo.

🔗 HubSpot Tooltip su GitHub

19. Hopscotch

Hopscotch è il secondo framework dopo Intro.js per creare tour guidati del prodotto. L'approccio è diverso: invece di una catena di elementi DOM, descrivi il tour come un oggetto JSON (passi, target, contenuti) e la libreria gestisce autonomamente rendering e navigazione. Supporta tour multi-pagina: l'utente segue un link e il tour riprende dallo stesso passo.

Il progetto è passato sotto l'ala dell'organizzazione broccolijs-archive ed è congelato. Per un nuovo prodotto consigliamo Intro.js, ma se mantenete codice legacy con Hopscotch, funziona ancora ed è documentato.

Pro: descrizione del tour in JSON, supporto multi-pagina, API matura. Contro: progetto archiviato, nessuna nuova funzionalità.

Hopscotch su GitHub (progetto archiviato)

20. Darktooltip

Darktooltip è un plugin jQuery dal design scuro fisso, con supporto per contenuti HTML e animazione di comparsa. L'API è semplice: chiami .darktooltip() su un elemento, passi le opzioni, fatto. Adatto per widget piccoli e pannelli di amministrazione dove serve un tooltip rapido e coerente senza smanettare con i CSS.

Nella nostra esperienza, Darktooltip è uno strumento di nicchia: se il tema scuro si adatta al design, funziona bene; se hai bisogno di personalizzare i colori, è più semplice prendere Tooltipster o Tippy.js.

Pro: API semplice, contenuti HTML, animazione gradevole. Contro: solo tema scuro, dipendenza da jQuery, progetto inattivo.

🔗 Darktooltip su GitHub

21. Tipso

Tipso chiude la raccolta come un gradevole plugin jQuery leggero con animazioni CSS3. Design responsive nativo (il tooltip cambia dimensione su mobile), diversi trigger e posizioni, supporto HTML. Da notare che Tipso esiste anche come plugin per WordPress, il che può essere comodo per i proprietari di siti WordPress che non vogliono mettere mano al codice.

La libreria non viene aggiornata da diversi anni, ma il codice è stabile e non presenta bug critici. Per progetti jQuery semplici, un'opzione praticabile.

Pro: reattività, versione WordPress, animazione gradevole. Contro: non aggiornato, legato a jQuery.

🔗 Tipso su GitHub

Come abbiamo testato e come scegliere il tuo tooltip

Abbiamo sottoposto ogni plugin alla stessa checklist: caricamento su pagina vuota, rendering al bordo dello schermo, comportamento con rapidi cambi di hover, tap su mobile, personalizzazione di colori e font. I punteggi nella tabella sopra non sono "stelline" astratte, ma risultati diretti di questi test.

Per una scelta rapida, tieni a mente questa matrice di abbinamento:

• Landing page, blog, documentazione → Microtip o Wenk. CSS puro, caricamento istantaneo, niente di superfluo.
• Pannello di amministrazione su jQuery, sito WordPress → Tooltipster. Maturo, stabile, con supporto touch.
• Applicazione web moderna, React/Vue → Tippy.js. Miglior posizionamento sul mercato, TypeScript, sviluppo attivo.
• Finestre di dialogo + tooltip + notifiche in un unico pacchetto → JBox. Stile unificato per tutti i popup.
• Tour del prodotto, onboarding, istruzioni passo passo → Intro.js. Standard di settore, oltre 23k stelle, tour multi-pagina.

Regola generale che abbiamo ricavato dai test: se hai dubbi, prendi Tippy.js. Copre la stragrande maggioranza degli scenari, non si trascina dietro jQuery e risolve il problema del posizionamento una volta per tutte. E se il progetto è già su jQuery e non c'è budget per la migrazione, Tooltipster non ti deluderà.

Video: come creare un bel tooltip in puro CSS

Per vedere i tooltip in azione, guarda questo tutorial di AlgoKage: in 10 minuti costruirai un elegante suggerimento a comparsa senza una sola riga di JavaScript:

⁉️🤔 Domande frequenti

Serve JavaScript per i tooltip?

Non necessariamente. Per un semplice tooltip testuale su desktop, bastano i CSS (Microtip, Wenk, Simptip). Ma se servono contenuti HTML, posizionamento automatico ai bordi dello schermo, trigger al click o supporto mobile, non puoi fare a meno di JavaScript. Tippy.js e Tooltipster coprono questi scenari.

Quanto è importante l'accessibilità (a11y) nei tooltip?

Fondamentale. Gli utenti di screen reader devono ricevere il testo del tooltip senza passare il cursore. L'approccio corretto: usare aria-describedby sul trigger e role="tooltip" sul tooltip stesso. Tippy.js e Microtip lo supportano nativamente. Se scrivi un tooltip personalizzato, non ignorare le specifiche WAI-ARIA.

Perché Tippy.js è migliore del vecchio Tooltipster?

Tippy.js non dipende da jQuery, è scritto in TypeScript, usa Floating UI per il posizionamento (il tooltip resta sempre dentro il viewport) e supporta il tree-shaking. Tooltipster è maturo e stabile, ma la dipendenza da jQuery nel 2026 è indesiderabile per nuovi progetti. Se hai già uno stack jQuery, Tooltipster è un'ottima scelta; se parti da zero, Tippy.js.

Si possono usare più librerie di tooltip sullo stesso sito?

Tecnicamente sì, ma in pratica si creano conflitti di stile, duplicazione di codice e confusione nel debugging. L'eccezione è Microtip per le icone + Intro.js per il tour del prodotto: le loro aree di competenza non si sovrappongono. In generale, scegli una libreria per lo scenario principale.

Perché i tooltip vengono tagliati su mobile?

I dispositivi mobili non hanno l'hover e il loro viewport è stretto. I tooltip che su desktop compaiono a destra di un elemento possono finire fuori schermo su mobile. Soluzione: o una posizione responsive (Tippy.js può scegliere automaticamente il lato), oppure sostituire il tooltip con un popover cliccabile per mobile.

Conviene usare Grumble.js o Crumble in un progetto reale?

No. Entrambe le librerie non vengono aggiornate da più di 10 anni e dipendono da una versione obsoleta di jQuery. Visivamente sono interessanti come concept, ma per la produzione prendi analoghi moderni: Tippy.js con un tema personalizzato può imitare qualsiasi stile visivo senza dipendenze obsolete.

Quale plugin per tooltip scegliere nel 2026?

Ventuno plugin sono tanti per scegliere, ma quelli veramente universali sono tre: Microtip per suggerimenti CSS ultraleggeri, Tooltipster per progetti jQuery e Tippy.js per tutto il resto. Intro.js fa storia a sé: non è un tooltip ma un framework per l'onboarding, e nella sua nicchia è il migliore.

I restanti diciotto sono o strumenti di nicchia per un design specifico (Darktooltip, Simptip), o reperti storici che hanno influenzato il settore (Grumble.js, HubSpot Tooltip), o progetti solidi ma congelati che funzionano ancora, anche se per codice nuovo è meglio prendere qualcosa di vivo.

Se sei arrivato a questo punto, la raccolta ha svolto il suo compito: ora sai quale plugin prendere per il tuo progetto. Prendilo e provalo, tutti i link a documentazione e repository sono nella descrizione di ogni strumento.