Tooltip con CSS: semplicità e accessibilità senza JavaScript

Creare tooltip funzionali e accattivanti è un modo efficace per fornire informazioni aggiuntive all’utente senza sovraccaricare l’interfaccia. Nel panorama dello sviluppo front-end, spesso si ricorre a JavaScript per gestire effetti di hover o comportamenti dinamici. Tuttavia, con un uso attento degli pseudoclassi e delle proprietà CSS, possiamo ottenere tooltip eleganti e facili da mantenere, senza dover scrivere una sola riga di JavaScript.

Perché puntare sui tooltip in CSS

• Performance e leggerezza: Nessuna libreria aggiuntiva o script in esecuzione continua.
• Compatibilità e accessibilità: I tooltip in puro CSS, se progettati correttamente, risultano accessibili anche tramite tastiera e screen reader.
• Facilità di manutenzione: Centralizzando gli stili, eventuali modifiche sono più semplici e veloci.

Come funziona il tooltip in CSS

1. Markup HTML
   • Aggiungi un contenitore (es. span, button o div) per l’elemento che necessita del tooltip.
   • Utilizza un attributo personalizzato o un data-attribute per memorizzare il testo del tooltip, ad esempio:

<button class="tooltip" data-tooltip="Testo del tooltip">Hover su di me</button>

2. Stile di base dell’elemento
   • Imposta la posizione relativa sull’elemento padre (position: relative;) affinché il tooltip possa essere posizionato correttamente:

.tooltip {
	position: relative;
	cursor: pointer;
}

3. Creazione del tooltip con pseudoelementi
   • Con :before o :after, puoi generare il contenuto del tooltip attingendo dal data-attribute:

.tooltip:hover::after {
	content: attr(data-tooltip);
	position: absolute;
	top: -40px;
	/* Valore di esempio */
	left: 50%;
	transform: translateX(-50%);
	background-color: #333;
	color: #fff;
	padding: 8px 12px;
	border-radius: 4px;
	white-space: nowrap;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
	/* Evitare che si veda se non in hover */
	opacity: 1;
	transition: opacity 0.2s ease-in-out;
	pointer-events: none;
}

.tooltip::after {
	content: "";
	/* Necessario per definire le dimensioni */
	opacity: 0;
	/* Tooltip inizialmente invisibile */
}

4. Freccia del tooltip (opzionale)
   • Per creare una piccola freccia rivolta verso l’elemento, usa un ulteriore pseudoelemento (::before o ::after) e sfrutta i bordi:

.tooltip:hover::before {
	content: "";
	position: absolute;
	top: -10px;
	left: 50%;
	transform: translateX(-50%);
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-bottom: 6px solid #333;
	/* Mostra la freccia */
	opacity: 1;
	pointer-events: none;
}

.tooltip::before {
	opacity: 0;
	/* Freccia inizialmente invisibile */
	transition: opacity 0.2s ease-in-out;
}

5. Accessibilità
   • Considera l’uso del focus: applica un effetto simile all’hover anche su :focus per permettere la navigazione da tastiera.cssCopia codice

.tooltip:focus::after,
.tooltip:focus::before {
	opacity: 1;
}

Con questi passaggi hai un tooltip completamente gestito da CSS, snello in termini di codice e altamente mantenibile. Ricordati di testare sempre l’effetto su diversi dispositivi e risoluzioni, verificando anche la leggibilità dei colori selezionati.

Accessibilità: il problema dei tooltip solo CSS

I tooltip puri CSS basati su :hover hanno un limite importante: non funzionano con la tastiera e sono invisibili agli screen reader. Per un tooltip davvero accessibile:

• Usa :focus-visible insieme a :hover per supportare la navigazione da tastiera.
• Aggiungi role="tooltip" e aria-describedby all’elemento trigger.
• Valuta la Popover API nativa (supportata da tutti i browser moderni dal 2024): gestisce focus trap, Esc per chiudere e accessibilità automaticamente.

/* Tooltip visibile anche via tastiera */
.trigger:hover .tooltip,
.trigger:focus-visible .tooltip {
  opacity: 1;
  visibility: visible;
}

Quando usare JavaScript

Per tooltip su dispositivi touch (dove :hover non esiste), o quando il contenuto del tooltip è dinamico, vale la pena aggiungere un piccolo script o usare una libreria leggera come Floating UI che gestisce anche il posizionamento automatico quando il tooltip va fuori schermo.

CSS anchor positioning: il futuro dei tooltip

La nuova CSS Anchor Positioning API, supportata da Chrome dal 2024 e in arrivo su tutti i browser nel 2026, rivoluziona i tooltip: puoi ancorare un elemento flottante a qualsiasi altro elemento nella pagina senza JavaScript e senza calcoli di posizione manuale. Il browser gestisce automaticamente lo spostamento quando il tooltip va fuori schermo.

.tooltip {
  position: absolute;
  position-anchor: --my-button;
  top: anchor(bottom);
  left: anchor(center);
  translate: -50% 8px;
}

Questa API eliminerà gran parte dei casi d’uso di librerie come Popper.js o Floating UI.

Hai trovato utile questo Articolo? Continua a seguire Cyberalchimista sui social (@cyberalchimista) per altri tutorial e consigli sullo sviluppo web! Se hai domande o vuoi condividere i tuoi progetti contattaci.