jQuery: creare tooltip

Creare tooltip con jQuery è un'operazione che richiede semplicemente la conoscenza del posizionamento assoluto CSS in relazione ad un elemento già presente nel flusso della pagina. jQuery utilizza l'oggetto offset() e le sue proprietà per posizionare il tooltip nella pagina rispetto alla posizione assoluta del suo elemento genitore. Con posizione assoluta si intende l'offset superiore e sinistro dell'elemento in questione. Vediamo i dettagli dell'implementazione.

Vogliamo trasformare questa struttura HTML:

<a href="#" class="tooltip" title="Lorem ipsum dolor sit amet">...</a>

in questa:

<a href="#" class="tooltip">...
  <span>Lorem ipsum dolor sit amet</span>
</a>

Quindi abbiamo eliminato l'attributo title e riversato il suo contenuto nell'elemento span che costituirà il tooltip. Il nostro CSS è estremamente semplice:

a {
	color: #a40;
	font-weight: bold;
	text-decoration: none;
	cursor: pointer;
}

a.tooltip span {
	width: 10em;
	padding: 0.4em;
	background: #ffc;
	border: 1px solid #666;
	color: #333;
	position: absolute;
	border-radius: 6px;
	box-shadow: 4px 4px 4px #ccc;
	font-size: 85%;
	font-weight: normal;
}

È fondamentale che il nostro tooltip sia posizionato in modo assoluto. Con jQuery useremo l'evento hover dopo aver creato ciascun tooltip e averlo aggiunto al suo link di appartenenza. Il tooltip andrà prima nascosto, poi posizionato in modo assoluto e infine mostrato/nascosto con i metodi fadeIn() e fadeOut():

$(function() {

   $('a.tooltip', 'p').each(function() {

      var $a = $(this);
      var title = $a.attr('title');
      
      $('<span/>').text(title).
      appendTo($a).hide();
      
      $a.removeAttr('title');
      
      $a.hover(function() {
      
         $('span', $a).css({
           top: $a.offset().top + 18,
           left: $a.offset().left + 10
         }).stop(true, true).fadeIn(800);  
      
      }, function() {
      
        $('span', $a).stop(true, true).
        fadeOut(800);
      
      
      });

   });
});

Abbiamo anche rimosso l'attributo title per evitare sovrapposizioni. Il metodo stop() viene usato per impedire che le animazioni si accavallino al passaggio del mouse.

Potete visionare l'esempio finale in questa pagina.