## 表格鼠标移入弹出显示 ##### 使用方法 1、在layui 的table中的cols使用templet并在templet中使用tooltip包裹实际的内容 ``` {field: 'startTime', align:'left',title: '发起时间',width:'12%',templet:function(d){ return '<tooltip>' + createTime(d.startTime) + '</tooltip>' }} ``` 2、在table.render的down中添加renderTooltip()方法 ``` // 渲染表格 var tableResult = table.render({ elem: '#' + orderProperty.tableId, url: , method:'POST', contentType: 'application/json', //toolbar: '#toolbar', where:{ param:{ flowType:flowType, workcardType:workcardType, workcardTypes:workcardTypes } }, defaultToolbar: false, request: { pageName: 'pageNum', //页码的参数名称,默认:page limitName: 'pageSize' //每页数据量的参数名,默认:limit }, parseData: function(res){ //res 即为原始返回的数据 if(res.code == 200) res.code = 0; return { "code": res.code, //解析接口状态 "msg": res.msg, //解析提示文本 "count": res.data.total, //解析数据长度 "data": res.data.list //解析数据列表 }; }, page: true, // height: tableHeight, cellMinWidth: 100, cols: orderProperty.initColumn(), done: function (res, curr, count) { // $('tr > td').css({'height':'95px'}); // $('.layui-table-page').css({'border-width':'0px'}); $('.layui-table-page').attr("align","right"); console.info("============activiti/queryMyWorkFlowLists========done========"); renderTooltip() } }); ``` ##### 页面取消原生展开 css中加入 ``` [lay-id="orderTable"] .layui-table-grid-down{ display: none } ``` 其中orderTable为表格id ##### 生成代码 位于js/utils.js中 ``` function renderTooltip(){ var tooltip $("tooltip").each(function(index,element){ var parent = element.parentElement element.onmouseenter = function(){ if(parent.offsetWidth - 30 < element.offsetWidth){ tooltip = layer.open({ type: 4, content: [element.innerText, element], //数组第二项即吸附元素选择器或者DOM shade: 0, tips: 1 }); } } parent.onmouseleave = function(){ layer.close(tooltip); } }); } ```