Magazine Informatica

Creare una tooltip velocemente utilizzando jQuery

Creato il 01 gennaio 1970 da Decadeweb @simone_marchese

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

Creare una tooltip velocemente utilizzando jQuery

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

Ritornare alla prima pagina di Logo Paperblog