<html>
<head>
<title>Tooltip</title>
<script type="text/javascript" src="jquery.min.js"></script><!--Richiamo la libreria jQuery-->
<style>
#tooltip{
position: absolute;
color: #FFFFFF;
background:#000000;
padding: 10px;
font-size: 12px;
border: 2px solid white;
opacity: 0;
filter: alpha(opacity=0);
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
display: none;
}
</style>
</head>
<body>
<p><a tooltip="Tooltip!">Tooltip</a> di esempio. Posso posizionarli dove voglio <a tooltip="qua!">qua</a> anche <a tooltip="qui!">qui</a>.</p>
<p tooltip="Su tutto il paragrafo!">Posso metterli su un intero paragrafo.</p>
<div tooltip="Sul div!">Posso metterlo anche in un div.</div>
<p>Si può mettere in un qualsiasi tag basta aggiungere ad esso l'attributo <a tooltip='basta aggiungere una cosa tipo tooltip="Ciao!"'>"tooltip"</a> contenente il testo del tooltip.</p>
<font tooltip="Su un qualsiasi tag!">Ricapitolando questi tooltip si possono mettere dove volete su un qualsiasi tag!</font>
<p tooltip="I tooltip sono magnifici!">Tooltip: Molto divertenti e allo stesso tempo molto utili.</p>
<p><b tooltip="Giocate con i tooltip!">Divertitevi!</b></p>
<script>
document.write("<div id=\"tooltip\"></div>");//creo il tooltip
function getMousePosition(e) {//funzione per lo spostamento del tooltip
if($.browser.msie) {//se il browser è ie...
var e = window.event;//...imposto la variabile "e"
}
var top = e.clientY + 20 + document.documentElement.scrollTop + "px";//sposto il tooltip sull'asse Y
var left = e.clientX + 20 + document.documentElement.scrollLeft + "px";//sposto il tooltip sull'asse X
$("#tooltip")//seleziono il tooltip
.css({"top": top, "left": left});//applico lo spostamento
}
document.onmousemove=getMousePosition;//Ogni volta che si muove il muose richiamo la funzione
$("*[tooltip]")//seleziono tutti i tag che hanno attributo "tooltip"
.hover(function() {//quando passo sopra al tag
$("#tooltip")//seleziono il tooltip
.text($(this).attr("tooltip"))//imposto il testo in base al contenuto dell'attributo "tooltip"
.css({"display": "block"})//rendo il tooltip presente nel ducumento
.stop()//fermo qualsiasi animazione ci sia riguardante il tooltip
.animate({"opacity": 0.65},500);//aumento l'opacità con animazione
},
function() {//quando esco dal tag
$("#tooltip")//seleziono il tooltip
.stop()//fermo qualsiasi animazione ci sia riguardante il tooltip
.animate({"opacity": 0},500,function() {//diminuisco l'opacità con animazione e quando finisce lancio una funzione
$("#tooltip")//seleziono il tooltip
.css({"display": "none"});//rendo il tooltip non presente nel ducumento
});
});
</script>
</body>
</html>
