<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>