Creare un tooltip gradevole con javascript

Molte volte mi è capitato di andare in siti web dove, passando sopra  alcune parole, compariva un riquadro elegante con una descrizione, e non il solito tooltip ottenibile con l’attributo title.

Sto parlando di uno script, molto leggero (solo 2 KB), che vi rivoluzionerà il modo di visualizzazione appunto dei tooltip, non solo per quanto riguarda i link, ma anche per delle parole all’interno del testo a cui volete associare un’ulteriore spiegazione.

Guardando questo esempio, capirete subito dove voglio arrivare.

Questo effetto è semplicissimo da ottenere:una volta scaricato lo script, messo in fondo all’articolo, dovrete installarlo nella vostra pagina web, in questo modo:

tra i tag head dovrete mettere:

<link rel=”stylesheet” type=”text/css” href=”style.css” />
<script type=”text/javascript” language=”javascript” src=”script.js”></script>

Poi per associare il tooltip al link, o alla parola/e  che volete dovrete aggiungere il codice seguente:

onmouseover=”tooltip.show(‘Testo che voglio’);” onmouseout=”tooltip.hide();”

Quindi, ad esempio, per un link si farà così:

<a href=”miosito.html” onmouseover=”tooltip.show(‘Mio sito <strong>Fedeweb</strong>’);” onmouseout=”tooltip.hide();”>Fedeweb</a>

Spero di essere stato chiaro. La fonte da cui ho preso queste informazioni spiega in modo dettagliato il funzionamento dello script.

Scarica il sorgente

Guarda l’esempio