Realizzare tooltip con jQuery non è semplice, come del resto nulla è semplice quando lo si fa per la prima volta. Scopo di questo post è 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);
});
Usiamo le coordinate di ciascun link per andare a posizionare il nostro tooltip in modo assoluto. Si noti come abbiamo usato le proprietà pageY e pageX dell'oggetto event. Visualizziamo il nostro tooltip al passaggio del mouse tramite la dichiarazione CSS display: block e lo nascondiamo tramite il metodo fadeOut attribuendogli un certo ritardo per creare un effetto di transizione. Un potenziale errore in questo codice è il fatto che ho usato il metodo text() solo quando il tooltip viene posizionato. Per una migliore efficienza avrei dovuto usarlo all'atto della creazione del tooltip e prima di nasconderlo nella pagina.