Oggi ero in ricerca di qualche libreria, l'obiettivo era realizzare una tooltip velocemente.
E in merito ho trovato la seguente libreria (tipsy) di jQuery, e ora andremo a implementare la seguente demo.
- Inclusione dei file necessari:
Andiamo a includere il foglio di stile nel seguente modo
<link rel="stylesheet" type="text/css" href="tipsy.css" />
E i file js per utilizzare la libreria
<script type="text/javascript" src="js/jquery-1.4.4.js"></script>
<script type="text/javascript" src="js/jquery.tipsy.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.10.custom.min.js"></script>
- Impostiamo il selettore o la classe all'oggetto html
<script type="text/javascript">
$(document).ready(function(){
$('.tooltip').tipsy({fade: true, gravity: 'n'});
});
</script>
- E in conclusione impostiamo l'oggetto all'atributo html come segue
<img src="download.png" title=&Scarica l'archivio" class="tooltip" />
I file li potete trovare al seguente indirizzo
www.onehackoranother.com
E se preferite scaricare direttamente la demo al seguente indirizzo
download | Live demo
Autore
Sviluppatore web, aree riservete e gestionali.
Svolgo con passione e determinazione il proprio lavoro dedicando tempo alla ricerca e all'approfondimento di novità.
Sito web dell'autore