Tooltip informativo con CSS
Piccolo messaggio di aiuto che compare su hover e focus, senza JavaScript.
Quando si usa
Quando vuoi aggiungere una breve spiegazione a un pulsante, a un campo di form o a una parola tecnica.
Perché si usa
Il tooltip offre un aiuto contestuale senza appesantire il testo principale. Funziona anche con focus da tastiera.
Vantaggi principali
- Aiuto immediato vicino all'elemento
- Non richiede JavaScript
- Supporta hover e focus
Anteprima del risultato
Passa con il mouse o usa il focus sul pulsante informativo.
Codice completo
Puoi copiare il frammento e inserirlo in una pagina di prova. Prima della pubblicazione sostituisci i dati dimostrativi con quelli reali.
<button class="tooltip" data-tip="Testo di aiuto breve e chiaro">?</button>
<style>
.tooltip{
position:relative;
width:34px;
height:34px;
border:0;
border-radius:50%;
background:#2463a9;
color:#fff;
font-weight:700;
cursor:pointer;
}
.tooltip::after{
content:attr(data-tip);
position:absolute;
left:50%;
bottom:calc(100% + 10px);
transform:translateX(-50%);
width:220px;
padding:10px;
border-radius:8px;
background:#102640;
color:#fff;
opacity:0;
pointer-events:none;
transition:opacity .2s ease;
}
.tooltip:hover::after,
.tooltip:focus-visible::after{opacity:1}
</style>Da personalizzare: Testo del tooltip, larghezza del box, posizione e colori.
Errore da evitare: Non inserire nel tooltip informazioni indispensabili: chi usa tecnologie assistive potrebbe non riceverle nello stesso modo.