layui表格文字超出，鼠标悬停显示

 layui数据表格显示文字过长，超出表格宽度会默认显示省略号，并出现一个小按钮，点击按钮就可以看到全部内容。

但是新需求是要求鼠标悬停到上面就显示全部内容。直接上代码，复制到js里面就能用。

    //超出部分用鼠标悬停时，tooltip显示完整内容
    $(document).on('mouseenter', "tbody td", function () {
        try
        {
            var range = document.createRange();
            var cellChild = event.target.querySelector('.layui-table-cell');
            $("tbody td .layui-table-cell").css("overflow", "visible");
            try
            {
                //css底层方法，截取文字的长度
                range.setStart(cellChild, 0);
                range.setEnd(cellChild, 1);
            }
            catch(e)
            {
            }
            //文字的显示长度
            var rangeWidth = range.getBoundingClientRect().width;
            //这里加了30是应为layui的数据表格默认padding是15px,左右一共是30
            //offsetWidth是元素的宽度,这里指一个表格容器的宽度
            if (rangeWidth + 30 > this.offsetWidth)
            {
                $("tbody td .layui-table-cell").css("overflow", "hidden");
                $(this).attr('data-toggle', 'tooltip').attr('title', $(this).text());
            }
            $("tbody td .layui-table-cell").css("overflow", "hidden");
        }
        catch(e)
        {
            //适配IE9/IE10，IE9/IE10会直接进这里
            $("tbody td .layui-table-cell").css("overflow", "visible");
            //scrollWidth指内容物的宽度，这里虽然指文字宽度，但没有上面截取的精确
            if (this.offsetWidth < this.scrollWidth)
            {
                $("tbody td .layui-table-cell").css("overflow", "hidden");
                $(this).attr('title', $(this).text());
            }
            $("tbody td .layui-table-cell").css("overflow", "hidden");
        }
    });
    //鼠标离开时，tooltip消失
    $(document).on('mouseleave', 'tbody td', function () {
        $(this).attr('data-toggle', '');
    });

 效果如下图所示：