Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Tooltip con jQuery: le basi

Link copiato negli appunti

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.

Ti consigliamo anche