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

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

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



[html] view
plain copy

 





<a href='#' onMouseOver='mouseOver(this,event,"+s+");' onMouseOut='mouseOut();'>.....</a>  

//data是提示框要显示的全部内容  

CSS

[css] view
plain copy

 





.tooltip {  

  position: absolute;  

  display: none;  

  z-index: 9900000;  

  outline: none;  

  padding: 5px;  

  border-width: 1px;  

  border-style: solid;  

  border-radius: 5px;  

  -moz-border-radius: 5px 5px 5px 5px;  

  -webkit-border-radius: 5px 5px 5px 5px;  

  border-radius: 5px 5px 5px 5px;  

}  

[javascript] view
plain copy

 





function mouseOver(t,e,data){  

     //参数含义    

     //t:指当前对象，即超链接<a>  

     //e:event事件  

     //data:要显示的内容  

     var tooltipHtml = "<div id='tooltip' class='tooltip'>"+data+"</div>";  

     $(t).append(tooltipHtml); //添加到页面中    

     $("#tooltip").css({    

          "top": (e.pageY) + "px",    

          "left": (e.pageX) + "px"   

     }).show("fast"); //设置提示框的坐标，并显示   

}  

function mouseOut(){  

     $("#tooltip").remove();    

}  

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

另一种方法：

[html] view
plain copy

 





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

[javascript] view
plain copy

 





$(document).ready(function(){  

    $("#myTip").mouseover(function(event){  

        var tooltipHtml = "<div id='tooltip' class='tooltip'>Hello！</div>";  

        $(this).append(tooltipHtml);  

         $("#tooltip").css({    

             "top": (event.pageY) + "px",    

             "left": ($(this).width()) + "px"  //紧跟在内容的后面  

         }).show("fast"); //设置提示框的坐标，并显示   

    }).mouseout(function(){  

        $("#tooltip").remove();  

    })  

})  

$(this) :获得当前对象

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

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

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