layui 表格toolTip

## 表格鼠标移入弹出显示

##### 使用方法

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);
        }
     });
}
```

 

上一篇:具有AJAX,Jquery,PHP和MySQL的Netflix风格的工具提示


下一篇:vue中echarts的tooltip轮播