关于layui 实现表格中某列 添加鼠标悬浮显示详细内容的问题

前两天，在做公司项目的时候，运营方想让在表格某一列中添加一个鼠标显示详细信息的功能，因为layui和前端并不是十分的熟悉，也是稍微费了点力气，现在把自己达成效果的代码记录下来，方便以后学习和使用，其中有借鉴到一位博主的做法，表示感谢：

原来博主链接：(24条消息) layui中实现table单元格鼠标悬浮提示功能_Fff_Come_On的博客-优快云博客_layui鼠标悬停tips

因为我和这位博主的显示内容有些不一样，所以做了改动，

表头部分：

, cols: [[ //表头
    {checkbox: true, fixed: true}
    , {field: 'id', title: 'ID', sort: true, width: 80}
    , {field: 'id', title: '学员ID', width: 80}
    , {field: 'nickname', title: '昵称', width: 100}
    , {field: 'mobile_phone', title: '手机号', width: 120}
    , {field: 'unionId', title: 'uniionid', width: 150}
    , {field: 'add_wechat', title: '是否添加微信', width: 120}
    , {field: 'study_rate', title: '学习进度', width: 100}
    , {field: 'study_summary', title: '学习小结', width: 100}
    , {field: 'is_buy', title: '是否已购深度课', width: 120}
    , {field: 'total_amount', title: '实付金额', width: 120}
    , {field: 'paid_at', title: '支付时间', width: 150}
    , {field: 'order_no', title: '订单号', width: 150}
    , {field: 'source', title: '来源', width: 80}
    , {field: 'tag', title: '学员标签', width: 150,/*toolbar:"#btn"*/templet:function(d){
           
         return "<label id='test"+d.id+"' οnmοuseοver=\"show("+d.id+",'"+d.tag+"');\" οnmοuseleave='closeTips();'>" +d.tag[0] + "</label>";//这里d.tag之所以加单引号，是因为不加一直报错，前端实在不太好，不知道原因，加上不报错，我就加上了
        }}
]]

js部分：

var tipsVal;
function show(id,tag) {
    var tag = tag.split(',');//加这一步是因为传过来的数据是字符串，可能是我参数传参的那个单引号的原因吧
    var html = "";
    var node = "#test"+id;
    for(var i = 0;i<tag.length;i++){
        html += "<p>" + tag[i] + "</p>";
    }
    tipsVal=layer.tips(html,node,{tips:[2,"#009688"]});

}
function closeTips() {//关闭显示的信息
    layer.close(tipsVal);
}