表格中长字段设置鼠标悬停tips

这里用的是LayUi的模板选择器

<table class="layui-table table-border" lay-data="{ page: false, id: 'jsLists' }">
     <thead>
       <tr>                
         <th lay-data="{ field: 'jsjg', width: '29%', templet: '#jsjgTpl' ,unresize:true}">检索结果</th>
       </tr>
     </thead>
</table>

<script type="text/html" id="jsjgTpl">
    <input id="jsjg_{{d.LAY_INDEX-1}}" onmouseover="show(id);" onmouseleave="closeTips();" style="text-align: center"
           type="text" class="layui-input" field="jsjg" name="jsLists[{{d.LAY_INDEX-1}}].jsjg" value="{{d.jsjg||''}}"/>
</script>

添加鼠标悬停事件

//悬停事件
        var tipsVal;
        window.show = function (obj) {

            console.log(obj);
            // console.log("测试弹出框");
            var data = $('#' + obj).val();
            console.log(data);
            tipsVal = layer.tips("<div style='color:#000000;'>" + data + "</div>", '#' + obj, {tips: [3, "#fff"]});
        }
        window.closeTips = function () {//关闭显示的信息
            layer.close(tipsVal);
        }

效果如图所示