jquery tooltip事件

最新推荐文章于 2024-08-15 14:01:38 发布

weixin_30951743

最新推荐文章于 2024-08-15 14:01:38 发布

阅读量162

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/leeten/p/3488236.html

版权

 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>