1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 <title>制作tooltip提示</title> 6 <script src="jquery-1.10.2.min.js"></script> 7 </head> 8 9 <body> 10 <a href="#" title="请努力学习，未来是属于自己的，把握！" class="tooltip"> 11 上帝只眷顾懂得的人 12 </a> 13 </body> 14 <script> 15 16 var x=10; 17 var y=20; 18 $(".tooltip").mouseover(function(e){//function(e)传入事件，全局事件 19 this.myTitle=this.title;//获取当前的title 20 this.title=" "; //避免原有的title弹出所以设置为空 21 var $tooltip="<div id='tooltip'>"+this.myTitle+"<div>"//创建div节点 22 $("body").append($tooltip);//body前追加节点 23 $("#tooltip").css({"position":"absolute","top":(e.pageY+y)+"px", 24 "left":(e.pageX+x)+"px","color":"red" 25 }).show("fast");}).mouseout(function(){ //鼠标离开事件e.pageY为鼠标的y坐标，e.pageX为鼠标的X坐标 26 this.title=this.myTitle; 27 $("#tooltip").remove(); 28 }).mousemove(function(e){ //鼠标移动事件 29 $("#tooltip").css({"top":(e.pageY)+"px", 30 "left":(e.pageX)+"px" 31 }); 32 }); 33 34 35 36 </script> 37 </html>