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.
7 Commenti
[…] delle immagini in un tooltip Tempo fa avevo scritto un articolo su come creare dei tooltip gradevoli, grazie a […]
Grande script, sono riuscito a farlo funzionare in Joomla!… grazie !
come? 😀 è da un pò che ci provo! mi puoi contattare?
p.s. magnifico tooltip.
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???
Ciao Emiliano e benvenutno nel blog 😉
Con quale modal box l’hai provato?
Tutorial interessante, è senz’altro da sperimentare.
😉