Generatore di tooltip CSS
Scegli posizione e stile e passa il mouse (o usa Tab) sui pulsanti dell’anteprima. Il codice non usa JavaScript.
Come si usaSuggerimento che appare al passaggio del mouse
Disponibile in: 
Generatore di tooltip CSS: a cosa serve
Il tooltip è il breve suggerimento che appare passando il mouse su un pulsante o un’icona. Questo generatore crea il suggerimento solo con CSS, nelle quattro posizioni, con freccetta opzionale, colori, angoli e un ritardo perché non lampeggi quando il mouse passa solo sopra.
Il codice è accessibile: il suggerimento è collegato al pulsante con aria-describedby, ha role=tooltip, appare anche quando l’elemento riceve il focus da tastiera o touch e rispetta chi preferisce meno animazioni. L’anteprima ha tre pulsanti per provare.
Come si usa
- Scegli posizione, colori e angoli.
- Regola il ritardo e la freccetta.
- Copia l’HTML e il CSS.
Quando usarlo
- Spiegare icone senza testo.
- Suggerimenti nei form.
- Pulsanti di azione nei pannelli.
Domande frequenti
Il tooltip funziona su smartphone?
Su smartphone il passaggio del mouse non esiste; il suggerimento appare quando l’elemento riceve il focus, toccando un pulsante o un link. Per questo non mettere nel tooltip un’informazione indispensabile: deve essere anche nel testo della pagina.
Com’è reso accessibile?
Il testo del suggerimento sta in un elemento con role=tooltip collegato al pulsante tramite aria-describedby, così lo screen reader lo legge insieme al nome del pulsante. Appare anche al focus da tastiera (focus-visible) e non dipende solo dal colore.
Perché c’è un ritardo prima della comparsa?
Un piccolo ritardo evita che i suggerimenti lampeggino quando il mouse passa solo sopra diretto altrove. Per sparire, l’effetto è immediato.
È davvero gratis?
Sì, 100% gratis. Senza registrazione, senza abbonamento e senza limiti d’uso. Tutti gli strumenti di Tools123 sono gratuiti.