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.

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.