jquery 实现超出部分隐藏,鼠标移动上显示全部文字

来源：互联网发布：装修预算软件下载编辑：程序博客网时间：2024/05/22 10:51

css

#tooltipdiv {
position: absolute;
border: 1px solid #333;
background: #f7f5d1;
padding: 3px 3px 3px 3px;
color: #333;
display: none;
}

.divmatnrdesc{
   width:100px;overflow:hidden;
   white-space:nowrap;
   text-overflow:ellipsis;
}

<div class='divmatnrdesc'>texxxxxxxxx你好,有你就好!有你真好</div>

jquery

$('div.divmatnrdesc').live('mouseover', function(e) {
   _text=$(this).text();
   _tooltip = "<div id='tooltipdiv'><font style='font-size:26px'> "+_text+"</font></div>";
    $("body").append(_tooltip);
    $("#tooltipdiv").show();
   $("#tooltipdiv")
   .css({
   "top": (e.pageY+10) + "px",
   "left": (e.pageX +10) + "px"
  }).show("fast");
});

$('div.divmatnrdesc').live('mouseout', function(e) {
  $("#tooltipdiv").remove();
});

$('div.divmatnrdesc').live('mousemove', function(e) {
  $("#tooltipdiv")
  .css({
   "top": (e.pageY+10 ) + "px",
   "left": (e.pageX+10) + "px"
  }).show();
});
显示效果

原文地址：

http://blog.csdn.net/billhepeng/article/details/7461335