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).

Esempi

Esempio di tooltip in CSS3^[1]:

<!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^[2]:

<!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>

Note

^ (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.

Altri progetti

Wikimedia Commons contiene immagini o altri file su Tooltip

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

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

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

[1]

[2]