码迷,mamicode.com
首页 > 其他好文 > 详细

自定义title属性样式

时间:2019-08-28 18:33:36      阅读:397      评论:0      收藏:0      [点我收藏+]

标签:姓名   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);
            }
        }
    });

  

自定义title属性样式

标签:姓名   idt   eve   body   alt   art   inner   参数   ade   

原文地址:https://www.cnblogs.com/xiaolanschool/p/11425576.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!