JavaScript  »  Articoli  »  JQuery 

Realizzare tooltip con jQuery non è semplice, come del resto nulla è semplice quando lo si fa per la prima volta. Scopo di questo articolo è darvi un'idea di base su come procedere. Innanzitutto, un tooltip è un box HTML che compare quando l'utente attiva un controllo sulla pagina. Nel nostro caso andremo ad attivare i nostri tooltip quando l'utente passa col mouse sopra dei link. In seguito, quando l'utente allontana il mouse dal link, il tooltip scomparirà. I nostri link hanno questa struttura:

<a href="#" title="Titolo">...</a>

I tooltip che andremo a creare con jQuery avranno questa struttura:

<span class="tooltip">...</span>

Questi tooltip andranno inseriti nella pagina, riempiti con il contenuto testuale dell'attributo title (o se vogliamo con un altro tipo di contenuto) e mostrati solo quando l'utente andrà a passare il puntatore sul link. Per prima cosa, assegniamo degli stili CSS ai nostri tooltip:

span.tooltip {
  
  display: block;
  width: 150px;
  padding: 5px;
  background: yellow;
  border: 1px solid orange;
  font-size: small;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  position: absolute;
  
}

Perché abbiamo usato la dichiarazione position: absolute? Semplicemente perché andremo a mostrare i tooltip vicino ai link a cui si riferiscono. Questa dichiarazione andrà ad interagire con il codice jQuery adibito al calcolo delle coordinate degli elementi.

Il codice jQuery si suddivide in due parti (o fasi): setup ed esecuzione. Ecco il setup:

$(document).ready(function() {
 
 
 $('p a').each(function() {
  
  var $a = $(this);
  var title = $a.attr('title');
  $a.removeAttr('title');
  
  var tooltip = $('<span class="tooltip"/>');
  
  tooltip.appendTo('body').hide();
  
  
  // continua
  
 });
 
});

Eseguiamo un ciclo each() su tutti i link contenuti nei paragrafi. Memorizziamo quindi il riferimento all'elemento a corrente nella variabile $a per una migliore performance. Quindi facciamo una copia del contenuto dell'attributo title e poi rimuoviamo l'attributo stesso perchè non vada ad interferire con i nostri tooltip. Questo potrebbe causare dei problemi a livello di accessibilità, ma in questo caso si tratta solo di un esempio. Poi creiamo il nostro elemento con classe tooltip, lo inseriamo nella pagina e lo nascondiamo.

La seconda fase riguarda l'esecuzione vera e propria dei tooltip:

// continua all'interno di each()

$a.mouseover(function(e) {
   
   
   var top = e.pageY;
   var left = e.pageX;
   
   tooltip.css({
    
    display: 'block',
    top: top + 5,
    left: left + 5
    
    
   }).text(title);
   
   
  });
  
  $a.mouseout(function() {
   
   tooltip.hide(500);
   
  });

Altri articoli

Altre guide

Altre newsletter