<html>
<head>
<meta charset="utf-8">
<title>无标题页</title>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript" language="javascript"> $(function(){ var x=10; var y=20; $("a.tooltip").mouseover(function(e){ this.myTitle=this.title; this.title=""; var tooltip="<div id='tooltip'>"+this.myTitle+"</div>"; //创建DIV元素
$("#link").append(tooltip); //追加到文档中
$("#tooltip").css({"top": (e.pageY+y) + "px","left": (e.pageX+x) + "px"}).show(); //设置X Y坐标， 并且显示
}).mouseout(function(){ this.title=this.myTitle; $("#tooltip").remove(); //移除
}).mousemove(function(e){ $("#tooltip").css({"top": (e.pageY+y) + "px","left": (e.pageX+x) + "px"}); }) }) </script>
<style> #tooltip{ border:1px solid red; background:#FF6; position:absolute; padding:1px; color:#333; display:none; } </style>
</head>
<body>
<div id="link">
<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>
</div>
</body>
</html>
title属性：
使用 title 属性，可以让鼠标悬停在超链接上的时候，显示该超链接的文字注释。
<a href="http://www.baidu.cn" title = "百度的的中文站点">百度网站</a>
如果希望注释多行显示，可以使用 作为换行符。
<a href="http://www.baidu.cn" title = "百度的 中文站点">百度网站</a>