Fw

Wordpress Creative Developer

Creare un tooltip gradevole con javascript

  • Plugin jQuery
  • -

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.

fade_tooltip

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

7 Commenti

  1. […] delle immagini in un tooltip Tempo fa avevo scritto un articolo su come creare dei tooltip gradevoli, grazie a […]

  2. Grande script, sono riuscito a farlo funzionare in Joomla!… grazie !

  3. ma in che modo si può usare questo effetto con le modalbox ho provare a mettere uno z-index maggiore ma mi rimane cmq nascoto dietro quest’ultima, qualche idea???

  4. Ciao Emiliano e benvenutno nel blog 😉
    Con quale modal box l’hai provato?

  5. Tutorial interessante, è senz’altro da sperimentare.

Scrivi un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *