html标簽title屬性效果不友好，最緻命的是響應慢，體驗不好，JQuery-UI提供了很好的支援。在jquery.tip的基礎上又做了修改，這樣子定制效果更強。
代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery實作的簡單文字提示效果</title>
<!-- 無需引用jQuery，下面的js已經自帶了簡化的jquery代碼 -->
<script src="jquery.tip.js" type="text/javascript"></script>
<style type="text/css">
body {
margin: 0;
padding: 40px;
background: #fff;
font: 80% Arial, Helvetica, sans-serif;
color: #555;
line-height: 180%;
}
p {
clear: both;
margin: 0;
padding: .5em 0;
}
/* tooltip */
#tooltip {
position: absolute;
border: 1px solid #333;
background: #f7f5d1;
padding: 1px;
color: #333;
display: none;
}
</style>
<script type="text/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 元素 文字提示
$("body").append(tooltip); //把它追加到文檔中
$("#tooltip").css({
"top": (e.pageY + y) + "px",
"left": (e.pageX + x) + "px"
}).show("fast"); //設定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>
</head>
<body>
<h1 align="center">jQuery實作的簡單文字提示效果</h1>
<h2 align="center">請将滑鼠指向超連結文字</h2>
<p>
<a href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" class="tooltip" title="這是我的超連結這是我的超連結提這是我的超連結提這是我的超連結提這是我的超連結提示1.">jQuery提示1</a>
</p>
<p>
<a href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" class="tooltip" title="這是我的超連結這是我的超連結提這是我的超連結提這是我的超連結提這是我的超連結提提示2.">jQuery提示2</a>
</p>
</body>
</html>
轉載位址：http://www.cnblogs.com/puzi0315/archive/2012/10/17/2727693.html
![電源完整性與地彈噪聲的高速PCB仿真[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)