效果體驗：http://hovertree.com/texiao/jsstudy/2/
實現思路
1 鼠標移入標題（這裡是<a>標簽）
創建一個div，div的內容為鼠標位置的文本
將創建好的div加到文檔中
為提示層設置位置
2 鼠標移出標題
移除div
3 當鼠標在標題內移動時
同樣添加div效果
上面是跟隨光標的，這個是居中的：
http://hovertree.com/texiao/jsstudy/2/1.htm
跟隨光標完整代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery彈出光標跟隨提示框- 何問起</title><base target="_blank" />
<style type="text/css">
#tooltip {
position: absolute;
border: #333 1PX solid;
background: #f7f5d1;
padding: 1px;
color: #333;
display: none;
padding: 1px;
}a{color:blue}
#hovertree,#yestop,#hoverclock{width:789px;margin:20px auto}
</style>
<script src="http://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.js"></script>
</head>
<body>
<div id="hovertree"><a href="http://hovertree.com" class="tooltip" title="何問起首頁">何問起首頁</a> <a href="http://hovertree.com/texiao/" class="tooltip" title="網頁特效庫">特效</a></div>
<div id="yestop"><a href="http://hovertree.com/h/bjaf/tishikuang.htm" class="tooltip" title="本效果代碼">原文</a>
<a href="http://hovertree.com/texiao/jsstudy/2/" class="tooltip" title="本效果網址">效果</a>
<br /><br /><a href="#" class="tooltip" title="彈出層">test</a>
</div>
<div id="hoverclock">請把光標在各個鏈接上面移動，將會彈出跟隨光標的提示框。
<br /></div>
<script>
$(function () {
var x = 15;
var y = 10;
$("a.tooltip").mouseover(function (e) { //當鼠標指針從元素上移入時
this.myTitle = this.title;
this.title = "";
var tooltip = "<div id='tooltip'>" + this.myTitle + "</div>";
$("body").append(tooltip);
$("#tooltip").css({ "top": (e.pageY + y) + "px", "left": (e.pageX + x) + "px" }).show("fast");
}).mouseout(function () { //當鼠標指針從元素上移開時
this.title = this.myTitle;
$("#tooltip").remove();
}).mousemove(function (e) { //當鼠標指針從元素上移動時
$("#tooltip").css({ "top": (e.pageY + y) + "px", "left": (e.pageX + x) + "px" });
});
});
</script>
</body>
</html>
頁面居中代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery彈出光標跟隨提示框- 何問起</title><base target="_blank" />
<style type="text/css">
#tooltip {
position: absolute;
border: #333 1PX solid;
background: #f7f5d1;
padding: 1px;
color: #333;
display: none;
padding: 1px;
}a{color:blue}
#hovertree,#yestop,#hoverclock{width:789px;margin:20px auto}
</style>
<script src="http://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.js"></script>
</head>
<body>
<div id="hovertree"><a href="http://hovertree.com" class="tooltip" title="何問起首頁">何問起首頁</a> <a href="http://hovertree.com/texiao/" class="tooltip" title="網頁特效庫">特效</a></div>
<div id="yestop"><a href="http://hovertree.com/h/bjaf/tishikuang.htm" class="tooltip" title="本效果代碼">原文</a>
<a href="http://hovertree.com/texiao/jsstudy/2/" class="tooltip" title="本效果網址">效果</a>
<br /><br /><a href="#" class="tooltip" title="彈出層">test</a> <a href="http://hovertree.com/texiao/jsstudy/2/1.htm" class="tooltip" title="居中效果">居中效果</a>
</div>
<div id="hoverclock">請把光標在各個鏈接上面移動，將會彈出跟隨光標的提示框。
<br /></div>
<script>
$(function () {
var x = 15;
var y = 10;
$("a.tooltip").mouseover(function (e) { //當鼠標指針從元素上移入時
this.myTitle = this.title;
this.title = "";
var tooltip = "<div id='tooltip'>" + this.myTitle + "</div>";
$("body").append(tooltip);
$("#tooltip").css({ "top": (e.pageY + y) + "px", "left": (e.pageX + x) + "px" }).show("fast");
}).mouseout(function () { //當鼠標指針從元素上移開時
this.title = this.myTitle;
$("#tooltip").remove();
}).mousemove(function (e) { //當鼠標指針從元素上移動時
$("#tooltip").css({ "top": (e.pageY + y) + "px", "left": (e.pageX + x) + "px" });
});
});
</script>
</body>
</html>