Tooltip

Il tooltip (letteralmente: consiglio su uno strumento) è un comune elemento dell'interfaccia grafica dell'utente. È attivato dal cursore, di solito il puntatore del mouse. Passando il cursore sopra un oggetto, senza cliccarlo, si produce l'apertura di un piccolo "box" con informazioni supplementari riguardo l'oggetto stesso. Il box con le informazioni di dettaglio dovrebbe essere riportato vicino all'oggetto dove per il quale si vuole evidenziare maggiori informazioni. Un ulteriore approccio è svincolare la posizione del messaggio dall'oggetto dove viene applicato il mouseover.

Varianti

Una variante molto comune, specialmente nei programmi più datati, è mostrare la descrizione dell'oggetto in una barra di stato, ma questo tipo di descrizioni non sono chiamate di solito tooltip.

Un altro sistema che mirava a risolvere lo stesso problema, fu introdotto sui computer Macintosh dal System 7, con il nome di balloon help. In questo caso il testo di aiuto compariva in una nuvoletta simile a quella utilizzata nei dialoghi dei fumetti.

Un altro termine per tooltip, utilizzato da Microsoft per la documentazione per l'utente finale, è "ScreenTip" (letteralmente: consiglio a schermo).

Esistono anche tooltip che si aprono non "onmouseover" (al passaggio del mouse) ma con un click (onlclick). Si può fare con JS o HTML5^[1]^[2]. Ad esempio:

<details>
    <summary>Dettagli</summary>
    Contenuto mostrato al click
</details>

Esempi nel web

Esempio di tooltip in CSS3^[3]:

<!DOCTYPE html>
<html>
<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>
<body style="text-align:center;">

<p>Posiziona in mouse qui sotto:</p>

<div class="tooltip">Posiziona in mouse qui sopra
  <span class="tooltiptext">Testo del tooltip</span>
</div>

</body>
</html>

Esempio di tooltip in JS e Bootstrap^[4]:

<!DOCTYPE html>
<html lang="it">
<head>
  <title>Esempio di tooltip con Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h3>Esempio di tooltip</h3>
  <a href="#" data-toggle="tooltip" title="Hooray!">Posiziona qui il mouse</a>
</div>

<script>
$(document).ready(function(){
  $('[data-toggle="tooltip"]').tooltip();   
});
</script>
</body>
</html>

Critiche

L'utente in questo caso non può leggere il tooltip (che sparisce quando il puntatore del mouse o il dito viene spostato) e scrivere la password contemporaneamente

Ai tooltip vengono mosse alcune critiche^[5]^[6].

A volte sono difficili da individuare

Alcuni utenti non noteranno il tooltip anche se è evidenziato rispetto al resto del contenuto, il che significa che c'è un alto rischio che non vedranno mai il contenuto che contiene.

Potrebbero essere tagliati nella versione mobile della pagina

Tooltip che termina fuori schermo su un dispositivo mobile

Anche se la pagina web è responsiva, non è detto che lo siano anche i tooltip che contiene.

Oscurano lo schermo

Ciò significa che non è possibile in alcuni casi leggere la descrizione del tooltip e utilizzare contemporaneamente il resto dello schermo. Ad esempio non si può digitare nei campi di un form e contemporaneamente leggere le istruzioni per completarlo se sono racchiuse in un tooltip, poiché il mouse non può fare entrambe le cose contemporaneamente.

Gli utenti devono lavorare sodo per ricordare il suggerimento o passare ripetutamente da una modalità di funzionamento all'altra.

Non funzionano bene con il riconoscimento vocale

I tooltip costituiti da icone richiedono un'etichetta accessibile. Ma anche se ne hanno una, gli utenti vocali devono interpretare ciò che vedono e indovinare di cosa si tratta.

Rivelare il contenuto al passaggio del mouse è a volte inaccessibile

In primo luogo, è necessario utilizzare un mouse o un altro dispositivo di puntamento per utilizzare una descrizione comando che esclude gli utenti della tastiera e del touch screen.

In secondo luogo, lo stazionamento non è sempre un'intenzione per attivare un controllo. L'utente potrebbe spostare il cursore su un suggerimento che lo attiva accidentalmente.

In terzo luogo, richiede abilità motorie fini per funzionare. Gli utenti devono spostare con precisione il mouse sull'area interessata e tenerlo fermo per evitare di nasconderlo accidentalmente.

In quarto luogo, non è possibile per gli utenti degli schermi "lente di ingrandimento" (screen magnifier) spostare il proprio campo visivo senza nascondere la descrizione comando^[7].

Infine, gli utenti non possono selezionare o interagire con il contenuto all'interno della descrizione comando.

È possibile fornire un'esperienza paragonabile agli utenti della tastiera mostrando il tooltip in primo piano. Ma questo non è convenzionale ed esclude gli utenti touch screen.

Accessibilità

Ci sono alcune pratiche consigliate dalle regole WCAG^[8]:

Solo gli elementi interattivi dovrebbero attivare i tooltip
I tooltip dovrebbero descrivere direttamente il controllo dell'interfaccia utente che li attiva (cioè non creare un controllo puramente per attivare un tooltip)

Utilizzare aria-describedbyo aria-labelledbyper associare il controllo dell'interfaccia utente alla descrizione comando. Evitare aria-haspopupearia-live

<label for="name">Nome</label>
<input id="name" type="text" aria-describedby="name-hint">
<div id="name-hint" aria-hidden="false">
  Scrivi il tuo nome e cognome
</div>

Non utilizzare l'attributotitle per creare una descrizione comando
Non inserire informazioni essenziali nei tooltip
Fornire un mezzo per chiudere il tooltip sia con la tastiera che con il puntatore
Consentire al mouse di spostarsi facilmente sul tooltip senza chiuderlo
Non utilizzare un timeout per nascondere il tooltip

Esempi

Esempio di un tooltip su un icona. Deve essere molto chiaro all'utente che quest'ultima contiene un'informazione.
Il testo del tag ALT contenuto nel tag HTML <img> viene visualizzato quando il puntatore passa sopra l'immagine
Un link all'interno di un tooltip

Note

^ : The Details disclosure element - HTML: HyperText Markup Language | MDN, su developer.mozilla.org. URL consultato il 1º marzo 2021.
^ javascript - Tooltip on click of a button, su Stack Overflow. URL consultato il 1º marzo 2021.
^ (EN) Tryit Editor v3.6, su www.w3schools.com. URL consultato il 1º marzo 2021.
^ (EN) Tryit Editor v3.6, su www.w3schools.com. URL consultato il 1º marzo 2021.
^ (EN) Why Tooltips are Terrible and How to Better Design Them, su Chameleon. URL consultato il 1º marzo 2021.
^ (EN) The problem with tooltips and what to do instead – Adam Silver – Designer, London, UK., su Adamsilver.io. URL consultato il 1º marzo 2021.
^ esempio screen magnifier, su youtube.com.
^ (EN) Tooltips in the time of WCAG 2.1, su Sarah Higley. URL consultato il 1º marzo 2021.

Altri progetti

Wikimedia Commons contiene immagini o altri file su Tooltip

Portale Informatica: accedi alle voci di Wikipedia che trattano di informatica

[1] : The Details disclosure element - HTML: HyperText Markup Language | MDN, su developer.mozilla.org. URL consultato il 1º marzo 2021.

[2] vascript - Tooltip on click of a button, su Stack Overflow. URL consultato il 1º marzo 2021.

[3] (EN) Tryit Editor v3.6, su www.w3schools.com. URL consultato il 1º marzo 2021.

[4] (EN) Tryit Editor v3.6, su www.w3schools.com. URL consultato il 1º marzo 2021.

[5] (EN) Why Tooltips are Terrible and How to Better Design Them, su Chameleon. URL consultato il 1º marzo 2021.

[6] (EN) The problem with tooltips and what to do instead – Adam Silver – Designer, London, UK., su Adamsilver.io. URL consultato il 1º marzo 2021.

[7] sempio screen magnifier, su youtube.com.

[8] (EN) Tooltips in the time of WCAG 2.1, su Sarah Higley. URL consultato il 1º marzo 2021.

[1]

[2]

[3]

[4]

[5]

[6]

[7]

[8]