Tooltip

I tooltip sono piccole caselle che compaiono sullo schermo quando si passa il mouse su un elemento, come un termine tecnico o un pulsante. Forniscono brevi spiegazioni sul significato di ciascuna opzione, in modo che le persone possano comprenderle meglio e, auspicabilmente, utilizzare le funzioni interattive in modo più efficiente.

In generale, non è una buona idea utilizzare i tooltip per le informazioni che si ritiene debbano essere conosciute dagli utenti.

Ecco alcuni dei problemi legati ai tooltip:

• I tooltip non appaiono sui telefoni cellulari e su altri dispositivi touch. Ricorda che queste piccole "bolle informative" appaiono solo quando il mouse vi passa sopra. I dispositivi come i telefoni cellulari e i tablet, che si basano sul toccare, di solito non sono dotati di mouse.
• I tooltip rappresentano una sfida per l'accessibilità. Le persone che si affidano agli screen reader (ad esempio i non vedenti) o che possono usare solo la tastiera per navigaremolto probabilmente non riusciranno mai a sapere cosa contiene il tooltip. Anzi, probabilmente non sapranno nemmeno che esiste un tooltip.
• Anche tra i normo dotati non tutti sanno che possono ottenere maggiori informazioni passando il mouse su un testo o un'immagine.

Se pensi che i tuoi utenti abbiano bisogno di maggiori informazioni su qualcosa, in genere è meglio metterle in bella vista per impostazione predefinita.

Detto questo, se vuoi implementare il tuo tooltip il modo più semplice e compatibile per far apparire uno di questi suggerimenti informativi contestuali è quello di utilizzare il metodo previsto dagli standard HTML, l'attributo title.

<a href="https://www.tuttofaredigitale.it/html-css-tutorial" title="Cos'è l'HTML?">HTML e CSS</a>.

Un altro modo è quello di usare i CSS per visualizzare il tooltip. Questo metodo offre una maggiore flessibilità nell'aspetto del tooltip e consente persino di utilizzare immagini.

Tuttavia è ancora meno accessibile del metodo del title.

Ecco l'HTML per lo stesso tooltip dato in precedenza, ma implementato usando la proprietà content e lo pseudo-elemento ::after.

<a href="https://www.tuttofaredigitale.it/html-css-tutorial" id="tooltipdemoid">HTML e CSS</a>.

a#tooltipdemoid {  
position: relative ;
}

a#tooltipdemo:hover::after {
content: "What is HTML? What is CSS?" ;
position: absolute ;
top: 1.1em ;
 left: 1em ;
 min-width: 200px ;
 border: 1px #808080 solid ;
 padding: 8px ;
 color: black ;
 background-color: #fff100 ;
 z-index: 1 ;}