Scopriamo come realizzare un fantastico tooltip animato al passaggio del mouse con jQuery.
Se volete potete vedere il risultato finale , oppure scaricare direttamente il file zippato contenente tutto quello che vi serve.
Iniziamo!
-
Easy tooltip e jQuery
Per creare l’animazione con fade del tooltip scarichiamo lo script “easy tooltip” che troverete gia’ dentro il nostro archivio. Alleghiamo al nostro documento anche le librerie jQuery, indispensabili ovviamente per l’animazione.
Una volta fatto questo, passiamo alla costruzione dello script. Ricordiamoci che gli script vanno scritti nella sezione “head” del vostro sito.
Procediamo come segue:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ToolTip con jQuery - By Targetweb.it</title>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="js/easyTooltip.js"></script>
<script type="text/javascript" src="js/atooltip.min.jquery.js"></script>
<script type="text/javascript">
jQuery(function(){
jQuery('a.tip').aToolTip();
});
</script>
Come vedete lo script e’ molto semplice, si seleziona la classe .tip con jQuery e si assegna a tal classe il tooltip animato.
-
Applichiamo lo stile
Per lo stile della nostra demo (ovviamente personalizzabile secondo le vostre esigenze), incolliamo quanto segue:
<style>
body{
margin:0;
padding:0;
text-align:center;
background-image:url(images/bg.png); background-repeat:repeat;
}
#main{
margin:0 auto;
padding:0;
background-color:#000;
width:960px; height:700px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
-moz-box-shadow: 5px 5px 100px #FFF; /*OMbre*/
-webkit-box-shadow: 5px 5px 50px #FFF;
}
#header{ width:960px; height:200px; background-image:url(images/header.png);}
#nav { /*navigazione orizzontale*/
width: 80%;
float: right;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
top:35px;
right:0px;
left:0px;
position:relative;
z-index:+1;
}
#nav li {
float: right; }
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #FFF;
}
#nav li a:hover {
color: #000;
background-color: #FFF;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
}
/*TOOLTIP STYLE*/
.aToolTip {
background-color:#CCC;
border-color:#999;
color:#000;
margin:0;
padding:6px 12px;
}
.aToolTip .aToolTipContent {
position:relative;
margin:0;
padding:0;
}
</style>
Le stringhe:
background-color:#CCC; border-color:#999; color:#000;
Modificano rispettivamente: Colore di sfondo, colore del bordo, e del testo del nostro tooltip animato.
-
Finiamo con l’HTML
<body> <div id="main"> <div id="header"></div> <ul id="nav"> <li><a href="#" class="tip" title="I siti utili da visitare"><h2>Link</h2></a></li> <li><a href="#"class="tip" title="Siamo un'impresa specializzata in web design"><h2>Chi Siamo</h2></a></li> <li><a href="#"class="tip" title="Targetweb.it e' utile!"><h2>Dove Siamo</h2></a></li> <li><a href="#"class="tip" title="Compila questo form e sarai ricontattato!"><h2>Contatti</h2></a></li> <li><a href="#" class="tip" title="Ritorna alla Home Page"><h2>Home</h2></a></li> </ul> </div> </div> </body> </html>
Come vedete e’ indispensabile applicare la classe “tip” ai vari link a cui vogliamo applicare l’effetto, lo script visualizzera’ a schermo il contenuto del tag “title”, quindi ricordate di scriverlo!. A presto con altre guide e approfondimenti su questa fantastica libreria!
