自定義title屬性樣式

在開發中表格中文字太長，我們會以省略號的形式展示，鼠標移動在文字上就顯示全部，如果不用一般的UI框架，我們則會選擇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{
      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);
            }
        }
    });