在开发中表格中文字太长,我们会以省略号的形式展示,鼠标移动在文字上就显示全部,如果不用一般的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); } } });
原文地址:https://www.cnblogs.com/xiaolanschool/p/11425576.html
时间: 2024-10-28 11:38:24