tooltip nuvoletta testo
Web e code script visite 179

Tooltip: nuvoletta di testo al passaggio del mouse

3 min

Talvolta nel web capita di avere poco spazio per esplicare tutti i contenuti che si vogliono esprimere. Questo rende necessario alle volte inserire nella pagina un piccolo riferimento di poche parole, facendo poi apparire una nuvoletta di testo quando si passa con il mouse su un testo o una icona, come ad esempio la “i” di informazioni.

Pro e contro

Oltre ad essere molto utile la nuvoletta di testo (chiamata nel linguaggio tecnico tooltip) è anche un elemento esteticamente accattivante che rende il tuo sito interattivo e di impatto.

Riflettendoci un attimo però, considerando l’evoluzione del web, con un numero sempre maggiore di utenti provenienti da smartphone e tablet, gli effetti mouseover non sono soluzioni ottimali in termini di usabilità. Non esiste infatti nella versione mobile la funzione mouseover, ma al massimo il click.

Ad ogni modo, per chi volesse utilizzare questo strumento, esistono due modalità con le quali è possibile attivare la nuvoletta al passaggio del mouse. Le soluzioni sono jQuery o il codice CSS.

Tooltip in jQuery

La libreria di jQuery UI, importata nel documento web della pagina, permette di inserire in pochi passaggi il tooltip.

jQuery UI permette di personalizzare la nuvoletta in modi diversi e dispone già di diverse possibilità native per farla apparire sopra, sotto, sopra i campi di un form, o con determinate animazioni, ad esempio seguendo lo spostamento del mouse.

Ecco i codici da integrare nella tua pagina: partiamo con richiamare le librerie jQuery.

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

Aggiungiamo quindi lo script che permette l’attivazione del tooltip.

<script>
  $( function() {
    $( document ).tooltip();
  } );
</script>

Infine aggiungiamo il codice che fa partire la nuvoletta di testo sull’oggetto desiderato.

<a href="#" title="Questo è il testo della nuvoletta">Roba da Grafici</a>

Ti invito a visitare il sito dedicato per ulteriori personalizzazioni: jQuery UI.

Tooltip in CSS puro

Abbiamo visto con jQuery UI come attivare il tooltip su di un link. La stessa cosa può essere realizzata in CSS senza link, ossia senza doverlo per forza attivare con un collegamento ipertestuale.

Vediamo quali sono i passaggi. Sono due: il codice html e il codice CSS. Partiamo dal primo.

<div class="tooltip">Roba da Grafici
  <span class="nuvoletta">Questo è il testo della nuvoletta</span>
</div></script>

Passiamo quindi al CSS.

/* Attivatore del Tooltip */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Testo della nuvoletta */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;

  /* Posizione del testo della nuvoletta */
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;

  /* Fade in tooltip */
  opacity: 0;
  transition: opacity 0.3s;
}

/* Freccia della nuvoletta */
.tooltip .nuvoletta::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Mostra il testo della nuvoletta quando passi il mouse sopra il l'attivatore */
.tooltip:hover .nuvoletta {
  visibility: visible;
  opacity: 1;
}

Per maggiori informazioni e personalizzazioni ti consiglio di approfondire l’argomento su: W3Schools.

Ho testato entrambe le soluzioni e sono funzionanti. Non ti resta che scegliere quella che preferisci.

Riproduzione riservata © La riproduzione è concessa solo citando la fonte con link all'articolo. Condividi l'articolo


Articolo a cura di: Del Re Valerio
Dott. in Comunicazione e Pubblicità per le Organizzazioni. Sono l'ideatore del blog Robadagrafici.com e mi occupo di comunicazione visiva, grafica e web, per le aziende.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *



Potrebbe anche interessarti

webdesign

Web e code script

IL LINGUAGGIO HTML | Di cosa si tratta

2 min L’html è il linguaggio con cui potete indicare come i vari…

webdesign

Web e code script

Internet Browsers – Fashion Addict

1 min Come sarebbero le donne se fossero i browser di internet? Questa…

webdesign

Web e code script

5 Applicazioni wireframe e mockup gratuite

1 min Ogni web designer e sviluppatore dovrebbe avere un wireframe valido e…