Tooltip con jQuery: le basi

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:

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

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

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() a $a title tooltip

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 pageY pageX event display: block fadeOut text()