标签：姓名 idt eve body alt art inner 参数 ade
在开发中表格中文字太长，我们会以省略号的形式展示，鼠标移动在文字上就显示全部，如果不用一般的UI框架，我们则会选择title属性来实现这个效果，如
然而这种样式有点...嘻嘻嘻
有些人就问了，可不可以修改默认的title属性样式呢？答案是： 不能。 如果需要写样式需要自定义写，下面我们就一起来实现吧，先看一个效果
这个就是，鼠标移动上去就显示当前的文字系列，主要是通过content: attr(data-title);
html结构
<div class="table-tooltip">
<table border="1">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>24</td>
</tr>
</tbody>
</table>
</div>
<div class="tooltip-wp"></div>
css结构
table{
border-collapse: collapse;
}
tooltip-wp{
width: 200px;
position: fixed;
z-index: 100;
display: none;
}
.tooltip-wp:after{
content: attr(data-title);
position: absolute;
left: 0;
top: 0;
max-width: 500px;
background: blue;
padding: 2px 5px;
color: #fff;
border-radius: 5px;
word-break: break-all;
}
js部分
$(document).ready(function(){
//鼠标滑过表格单元格显示浮动框
var showFloatTimer=null;
$(‘.table-tooltip tbody tr td‘).hover(
function(event){
clearTimeout(showFloatTimer);
showFloatTimer=setTimeout(function(e){
$(‘.tooltip-wp‘).attr(‘data-title‘, event.currentTarget.innerHTML); //动态设置data-title属性
$(‘.tooltip-wp‘).fadeIn(200);//浮动框淡出
},300);
}
);
$(‘.table-tooltip tbody tr td‘).mouseout(function(){
$(‘.tooltip-wp‘).hide();
clearTimeout(showFloatTimer);//鼠标滑出时清除函数去抖中的定时事件
});
$(‘.table-tooltip tbody tr td‘).mousemove(floatMove());
//floatMove()运行后返回一个函数对象，或什么都不返回
function floatMove(){//节流函数
var canRun=true;
return function(e){//e是mousemove的event参数
if(!canRun){return;}//如果有一个定时方法，直接返回
canRun=false;
setTimeout(function(){
var top = e.pageY+5;
var left = e.pageX+5;
$(‘.tooltip-wp‘).css({
‘top‘ : top + ‘px‘,
‘left‘: left+ ‘px‘
});
canRun=true;
},150);
}
}
});
标签：姓名 idt eve body alt art inner 参数 ade
原文地址：https://www.cnblogs.com/xiaolanschool/p/11425576.html
