Tooltip con jquery

Uno degli effetti che piu va di moda oggi sono i famosi tooltip, cioe quelle simpatiche descrizioni che appaiono quando si passa il mouse su un link o un altro elemento della pagina. In genere si usano anche come descrizione dei vari link.

Tutti i piu famosi framework permettono di creare questo effetto e ,naturalmentete, anche jquery che, con un ottimo plugin, permette di realizzare un tooltip in pochi minuti e ,come sempre , con pochissime linee di codice.

Vediamo subito come implementarlo.

Come sempre alla fine dell’articolo posterò l’esempio online e la versione zippata per il download.

Bene cominciamo.

Per prima cosa scaricate jquery( come ancora non lo avete fatto?Non vi sara piu ripetuto ), poi scarichiamo il plugin disponibile a questo indirizzo, infine creiamo la nostra paginetta xhtml e via! In questo esempio userò una immagine come sfondo del div che conterrà il tooltip per creare l’effetto ancora piu accattivante, ma possiamo personalizzarlo come vogliamo semplicemente modificando il css e il selettore #tooltip, che viene creato dal plugin.

Bene linkiamo i due javascript al nostro file:

<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript” src=”jquery.tooltip.js”></script>

Poi creiamo il css per il div che contiene il nostro link con il tooltip :

body{
font-size:13px;
}
#tool{
position:relative;
width:500px;
height:100px;
margin:auto;
border:1px solid #ccc;
padding:10px;
background:#f5f5f5;
}
#tool a{
font-size:1.4em;
}

In questo caso ho anche aumentato il font del nostro link, per farlo risaltare meglio.

Quindi scriviamo il nostro codice jvascript :

$(document).ready(function(){
$(‘#tool a’).tooltip({
track: true,
delay: 0,
fixPNG: true,
top: 15,
showURL: false,
left: 5    ,
});

});

Infine passiamo al codice html, semplicissimo :

<div id=”tool”>
<p>
<a href=”http://www.antoniofullone.it” title=”tooltip con jquery”>Prova a muovere il mouse</a>
</p>
</div>

E voilà, abbiamo il nostro tooltip sul nostro link!

Vediamo un po cosa fa il codice, inanzitutto applica la funzione tooltip al nostro div, e dopo settiamo alcuni parametri:

track :true, significa che il tooltip seguira il mouse anche quando ci si muove, per capire la differenza provate a mettere false e vedrete che il tooltip non si muoverà. Delay è il tempo di “ritardo” con cui appare il tooltip, in questo caso 0 (espresso sempre in millisecondi). SHowUrl è impostato su false in modo da non mostrare l’url del link all’interno del nostro div. Naturalmente avrete fatto caso che il testo all’interno del tooltip è quello che abbiamo nell’atributo title del tag a, di default è il valore impostato ma si puo modificare e cambiare a proprio piacimento, cosi come tutti gli altri parametri. Per avere una panoramica visitate questa pagina.

La versione finale completa la trovate a questo indirizzo : tooltip con jquery

La versione zippata completa è scaricabile da qua.

hasta Luego!

Se ti va commenta questo articolo nel forum.

(2 votes, average: 3,00 out of 5)

 Loading ...

Popularity: 42% [?]

Potrebbero interessarti anche :

• Inviare una mail con php ajax e jquery in stile facebook (10)
• Menu animato con jquery (7)
• Uno slideshow ancora con jquery (3)
• Una gallery animata con jquery e css (6)
• Menu a scorrimento verticale con css e jquery (18)