jQuery实现鼠标移上弹出提示框，移出消失

<TD>里有一行数据 “那片笑声让我想起......”  假设超出规定长度将用......代替，

而现在要通过鼠标移动到......上 显示全部内容，移出则消失。如下图：

[html]  view plain  copy

 

1. <a href='#' onMouseOver='mouseOver(this,event,"+s+");' onMouseOut='mouseOut();'>.....</a>  
2. //data是提示框要显示的全部内容  

CSS

[css]  view plain  copy

 

1. .tooltip {  
2.   position: absolute;  
3.   display: none;  
4.   z-index: 9900000;  
5.   outline: none;  
6.   padding: 5px;  
7.   border-width: 1px;  
8.   border-style: solid;  
9.   border-radius: 5px;  
10.   -moz-border-radius: 5px 5px 5px 5px;  
11.   -webkit-border-radius: 5px 5px 5px 5px;  
12.   border-radius: 5px 5px 5px 5px;  
13. }  

[javascript]  view plain  copy

 

1. function mouseOver(t,e,data){  
2.      //参数含义    
3.      //t:指当前对象，即超链接<a>  
4.      //e:event事件  
5.      //data:要显示的内容  
6.      var tooltipHtml = "<div id='tooltip' class='tooltip'>"+data+"</div>";  
7.      $(t).append(tooltipHtml); //添加到页面中    
8.      $("#tooltip").css({    
9.           "top": (e.pageY) + "px",    
10.           "left": (e.pageX) + "px"   
11.      }).show("fast"); //设置提示框的坐标，并显示   
12. }  
13. function mouseOut(){  
14.      $("#tooltip").remove();    
15. }  

-----------------------华丽的分割线------------------------------

另一种方法：

[html]  view plain  copy

 

1. <a id="myTip">鼠标移在我上面有惊喜！</a>  

[javascript]  view plain  copy

 

1. $(document).ready(function(){  
2.     $("#myTip").mouseover(function(event){  
3.         var tooltipHtml = "<div id='tooltip' class='tooltip'>Hello！</div>";  
4.         $(this).append(tooltipHtml);  
5.          $("#tooltip").css({    
6.              "top": (event.pageY) + "px",    
7.              "left": ($(this).width()) + "px"  //紧跟在内容的后面  
8.          }).show("fast"); //设置提示框的坐标，并显示   
9.     }).mouseout(function(){  
10.         $("#tooltip").remove();  
11.     })  
12. })  

$(this) :获得当前对象
$(this).width() ：获得当前对象的宽度值

event.pageY  ：事件在网页中的y轴坐标

转自http://blog.csdn.net/itmyhome1990/article/details/17955543