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