Copy codeThe Code is as follows:
<Style>
Li {float: left; list-style: none; padding: 3px ;}
Img {border: # CCC 1px solid ;}
# Tooltip {display: none; border: # CCC 1px solid; position: absolute ;}
. Img1 {display: block ;}
. Div1 {padding: 0px; margin: 0px; background: #111; color: FFF; font-family: ;}
</Style>
<Ul>
<Li> <a href = "images/apple_1_bigger.jpg" class = "tooltip"> </a> </li>
<Li> <a href = "images/apple_2_bigger.jpg" class = "tooltip" title = "second product"> </a> </li>
<Li> <a href = "images/apple_3_bigger.jpg" class = "tooltip" title = "third product"> </a> </li>
<Li> <a href = "images/apple_4_bigger.jpg" class = "tooltip" title = "fourth product"> </a> </li>
</Ul>
<Script>
Var x = 10;
Var y = 10;
$ ("A. tooltip"). mouseover (function (e ){
This. myTitle = this. title;
This. title = "";
This. imgTitle = this. myTitle? This. myTitle: "No title ";
Var tooltip = "<div id = 'tooltip '> <div class = 'did1'>" + this. imgTitle + "</div>"
$ ("Body"). append (tooltip );
$ ("# Tooltip" ).css ({
"Top": + (e. pageY + y) + "px ",
"Left": + (e. pageX + x) + "px"
}). Show ("fast ");
}). Mouseout (function (){
$ ("# Tooltip"). remove ();
This. title = this. myTitle;
})
</Script>