tooltip nuvoletta testo
Web e code script visite 65

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.

Contenuto bloccato: accettare utilizzo dei cookie e ricaricare la pagina per visualizzarlo
Contenuto bloccato: accettare utilizzo dei cookie e ricaricare la pagina per visualizzarlo

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.

Contenuto bloccato: accettare utilizzo dei cookie e ricaricare la pagina per visualizzarlo
Contenuto bloccato: accettare utilizzo dei cookie e ricaricare la pagina per visualizzarlo

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

Come rendere leggero un filmato swf in Flash

3 min Se siete innamorati di Adobe Flash e delle sue animazioni, un…

webdesign

Web e code script

La base della sintassi di jQuery: $(document) .ready()

1 min Se vi state avvicinando da poco a jQuery e state iniziando…

webdesign

Web e code script

Scegli le icone e crea il tuo font personalizzato

1 min Ecco uno strumento che permetterà a voi web designer di risparmiare…