自定义title属性样式

Posted 2022-09-05 xiaolanschool

在开发中表格中文字太长，我们会以省略号的形式展示，鼠标移动在文字上就显示全部，如果不用一般的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);
            
        
    );