标签：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#tooltip{
position:absolute;/*设置为绝对定位才可以设置div左右位置*/
border:1px solid #333;
background: white;
display: none;
}
</style>
<script src="js/jquery-2.1.4.js"></script>
<script>
$(function(){
var x=10;
var y=20;
$("a.tooltip").mouseover(function(e){//e为事件对象
this.myTitle=this.title;//获取当前移入的title
this.title="";//移入是title为空
var tooltip="<div id=‘tooltip‘>"+this.myTitle+"<\/div>"; //创建div;
$("body").append(tooltip);//div加入到文档中
$("#tooltip")
.css({
"top": (e.pageY+y)+"px",//设置鼠标指针位置，pageX() 属性是鼠标指针的位置，值越高越向下
"left": (e.pageX+x)+"px"//pageX() 属性是鼠标指针的位置，值越高越向右
}).show("fast");//（注： 传入参数后，.show()和.hide()方法同时动画改变元素的width,height和透明属性；传入参数控制显隐速度，单位毫秒， 如.show(600)，也可传入fast,normal,slow，fast为200毫秒，normal为400毫秒，slow为600毫秒）
}).mouseout(function(){
this.title=this.myTitle;
$("#tooltip").remove();//移除
}).mousemove(function(e){//mousemove事件，让提示和鼠标一起移动
$("#tooltip")
.css({
"top": (e.pageY+y)+"px",
"left": (e.pageX+x)+"px"
});
});
})
</script>
</head>
<body>
<p><a href="#" class="tooltip" title="超链接提示1">提示1</a></p>
<p><a href="#" class="tooltip" title="超链接提示2">提示2</a></p>
<p><a href="#" title="这是自带提示1">自带提示1</a></p>
<p><a href="#" title="这是自带提示2">自带提示2</a></p>
</body>
</html>
标签：
原文地址：http://www.cnblogs.com/nullObj/p/4795674.html
