自定义title属性样式

在开发中表格中文字太长，我们会以省略号的形式展示，鼠标移动在文字上就显示全部，如果不用一般的UI框架，我们则会选择title属性来实现这个效果，如

自定义title属性样式

然而这种样式有点...嘻嘻嘻

有些人就问了，可不可以修改默认的title属性样式呢？答案是：不能。如果需要写样式需要自定义写，而仅仅是内容的换行使用
， 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{
       200px;
      position: fixed;
      z-index: 100;
      display: none;
 }
.tooltip-wp:after{
      content: attr(data-title);
      position: absolute;
      left: 0;
      top: 0;
      max- 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);
            }
        }
    });

自定义title属性样式

相关推荐