tooltip

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>tooltip实例</title>
<script type="text/javascript">
$(function(){
$("a.tooltip").mouseover(function(e){
this.myTitle = this.title;
this.title="";
    var tooltip = "<div id ="tooltip">" + $(this).title+ "</div>";
    $("body").append(tooltip);
    $("#tooltip").css({
    "top":e.pageY +"px",
    "left":e.pageX+"px"
    }).show("fast");
}).mouseout(function(){
$("#tooltip").remove();
    this.title = this.myTitle;
});
});

</script>
</head>
<body>

<p><a href="#" class="tooltip" title="这是我的超链接提示一">提示一</a></p>
<p><a href="#" class="tooltip" title="这是我的超链接提示二">提示二</a></p>
<p><a href="#"  title="这是自带提示一">这是自带提示一</a></p>
<p><a href="#"  title="这是自带提示二">这是自带提示二</a></p>
<p> 1、鼠标滑入链接
   2、创建一个div元素,div元素的内容是链接里title的值<br>
   3、把创建的元素追加到文档中<br>
   4、设置x坐标和y坐标,使它显示在鼠标位置的旁边<br>
   5、当鼠标离开超链接时,移除div元素。<br>
</p>
</body>
</html>

你可能感兴趣的:(tooltip)