Layui table 自定义表头添加tip说明

 <table class="layui-hide timetable" id="timetable" lay-filter="datacenter"></table>

.help_img {
    display: inline-block;
    width:15px;height:15px;
    padding-top: 2px;
    margin-left: 9px;
}
.help_img i {
    background: url(../img/tips_n.png) no-repeat;
    width: 15px;
    height: 15px;
    display: block;
    cursor: pointer;
    padding-top: 2px;
}
.help_img i:hover {
    background: url(../img/tips_h.png) no-repeat;
    width: 15px;
    height: 15px;
    display: block;
    cursor: pointer;
}
.help_txt {
    z-index: 9999;
    position: absolute;
    top: -53px;
    right:24px;
    padding: 3px;
    background: rgba(0,0,0,0.5);
    color: #fff;
    font-size: 14px;
    text-align: center;
    border-radius: 5px;
    line-height: 25px;
}
.num_right{position:relative;width:15px;height:15px;}
.num_right i {
    background: url(../img/tips_n.png) no-repeat;
    width: 15px;
    height: 15px;
    display: block;
    cursor: pointer;
}
.num_right i:hover {
    background: url(../img/tips_h.png) no-repeat;
    width: 15px;
    height: 15px;
    display: block;
    cursor: pointer;
}

layui.use('table', function () {
                var table = layui.table;
                //客服工作量统计表格
                table.render({
                    elem: '#timetable'
                    //, url: '../functions/demo10.json'
                    , title: '客户数据表'
                    , limit: 1000
                    //, totalRow: true
                    , cols: [[ //标题栏
                        { title: '客服/所属分组', fixed: 'left', field: "service", width: 150, rowspan: 2, height: 50, totalRowText: '总计', unresize: true } //rowspan即纵向跨越的单元格数
                        , { title: '客服工作状态', colspan: 4, align: 'center', rowspan: 1, hide: HideOrNotWork(0) }
                        , { align: 'center', title: '客服响应统计', colspan: 7, align: 'center', rowspan: 1, hide: HideOrNotWork(1) } //colspan即横跨的单元格数，这种情况下不用设置field和width
                        , { align: 'center', title: '转接统计', colspan: 2, align: 'center', rowspan: 1, hide: HideOrNotWork(2) }
                        , { align: 'center', title: '消息统计', colspan: 3, align: 'center', rowspan: 1, hide: HideOrNotWork(3) }
                    ], [
                           { field: 'loginTime', title: '登录时长', sort: true, rowspan: 1, align: 'center', minWidth: 120, totalRow: true, hide: HideOrNotWork(0) }
                            , { field: 'onlineTime', title: '在线时长', sort: true, rowspan: 1, align: 'center', minWidth: 120, totalRow: true, hide: HideOrNotWork(0) }
                            , { field: 'outTime', title: '离开时长', sort: true, rowspan: 1, align: 'center', minWidth: 120, totalRow: true, hide: HideOrNotWork(0) }
                            , { field: 'zhimangrate', title: '置忙率', sort: true, rowspan: 1, align: 'center', minWidth: 120, totalRow: true, hide: HideOrNotWork(0) }
                            , { field: 'averageFirst', title: '平均首次响应时长', sort: true, align: 'center', minWidth: 120, totalRow: true, hide: HideOrNotWork(1) }
                            , { field: 'averageTime', title: '平均响应时长', sort: true, align: 'center', minWidth: 120, totalRow: true, hide: HideOrNotWork(1) }
                            , { field: 'seconds', title: '30秒应答率', sort: true, align: 'center', minWidth: 120, totalRow: true, hide: HideOrNotWork(1) }
                            , { field: 'lostTalknum', title: '遗漏对话数', sort: true, align: 'center', minWidth: 120, totalRow: true, hide: HideOrNotWork(1) }
                            , { field: 'lostTalkrate', title: '遗漏对话率', sort: true, align: 'center', minWidth: 120, totalRow: true, hide: HideOrNotWork(1) }
                            , { field: 'delayTalknum', title: '延误对话数', sort: true, align: 'center', minWidth: 120, totalRow: true, hide: HideOrNotWork(1) }
                            , { field: 'delayTalkrate', title: '延误对话率', sort: true, align: 'center', minWidth: 120, totalRow: true, hide: HideOrNotWork(1) }
                            , { field: 'initiativeNum', title: '主动转接数', sort: true, align: 'center', minWidth: 120, totalRow: true, hide: HideOrNotWork(2) }
                            , { field: 'passivityNum', title: '被转接次数', sort: true, align: 'center', minWidth: 120, totalRow: true, hide: HideOrNotWork(2) }
                            , { field: 'allMessage', title: '总消息数', sort: true, align: 'center', minWidth: 120, totalRow: true, hide: HideOrNotWork(3) }
                            , { field: 'serviceMessage', title: '客服消息数', sort: true, align: 'center', minWidth: 120, totalRow: true, hide: HideOrNotWork(3) }
                            , { field: 'guestMessage', title: '客人消息数', sort: true, align: 'center', minWidth: 120, totalRow: true, hide: HideOrNotWork(3) }
                    ]]
                    , page: false
                    , data: array
                });

                $(".layui-table-sort").each(function (i, dom) {
                    var that = $(this)
                    switch (that.parent().find("span:eq(0)").text()) {
                        case "登录时长":
                            that.parent().find("span:eq(0)").append('<div class="help_img"><i></i><div class="help_txt" style="display:none">统计周期内，客服登录本系统的<br>总时长。</div></div >')
                            break;
                        case "在线时长":
                            that.parent().find("span:eq(0)").append('<div class="help_img"><i></i><div class="help_txt" style="display:none">统计周期内，客服登录本系统并<br>且状态为“在线”的总时长。</div></div >')
                            break;
                        case "离开时长":
                            that.parent().find("span:eq(0)").append('<div class="help_img"><i></i><div class="help_txt" style="display:none">统计周期内，客服登录本系统并<br>且状态为“离开”的总时长。</div></div >')
                            break;
                        case "置忙率":
                            that.parent().find("span:eq(0)").append('<div class="help_img"><i></i><div class="help_txt" style="display:none">统计周期内，客服状态为非“在<br>线”的总时长占该客服登录总时<br>长的比例。</div></div >')
                            break;
                        case "平均首次响应时长":
                            that.parent().find("span:eq(0)").append('<div class="help_img"><i></i><div class="help_txt" style="display:none">首次响应时长指客户发送第一条消息后到客服首次<br>回复该消息之间的时间间隔，平均首次响应时长=客服首次<br>响应时长总和/总客服首次响应次数。</div></div >')
                            break;
                        case "平均响应时长":
                            that.parent().find("span:eq(0)").append('<div class="help_img"><i></i><div class="help_txt" style="display:none">每一次客服对客户的消息响应时<br>间间隔的平均值。</div></div >')
                            break;
                        case "30秒应答率":
                            that.parent().find("span:eq(0)").append('<div class="help_img"><i></i><div class="help_txt" style="display:none">客户首次发出消息后，客服在<br>30s之内回复的对话占所有对话的比例。</div></div >')
                            break;
                        case "遗漏对话数":
                            that.parent().find("span:eq(0)").append('<div class="help_img"><i></i><div class="help_txt" style="display:none">客服发送的消息未被访客回复的<br>对话数量。</div></div >')
                            break;
                        case "遗漏对话率":
                            that.parent().find("span:eq(0)").append('<div class="help_img"><i></i><div class="help_txt" style="display:none">遗漏对话数/总对话数。</div></div >')
                            break;
                        case "延误对话数":
                            that.parent().find("span:eq(0)").append('<div class="help_img"><i></i><div class="help_txt" style="display:none">访客发送的消息未被客服回复<br>的对话数量。</div></div >')
                            break;
                        case "延误对话率":
                            that.parent().find("span:eq(0)").append('<div class="help_img"><i></i><div class="help_txt" style="display:none">延误对话数/总对话数。</div></div >')
                            break;
                        case "主动转接数":
                            that.parent().find("span:eq(0)").append('<div class="help_img"><i></i><div class="help_txt" style="display:none">指该客服主动转接给其他客服<br>的对话数量。</div></div >')
                            break;
                        case "被转接次数":
                            that.parent().find("span:eq(0)").append('<div class="help_img"><i></i><div class="help_txt" style="display:none">该客服收到其他客服转接的对<br>话数量。</div></div >')
                            break;
                        case "总消息数":
                            that.parent().find("span:eq(0)").append('<div class="help_img"><i></i><div class="help_txt" style="display:none">所有有效对话中客服与客户<br>发送的消息总数。</div></div >')
                            break;
                        case "客服消息数":
                            that.parent().find("span:eq(0)").append('<div class="help_img"><i></i><div class="help_txt" style="display:none">客服发送给客户的消息总数。</div></div >')
                            break;
                        case "客人消息数":
                            that.parent().find("span:eq(0)").append('<div class="help_img"><i></i><div class="help_txt" style="display:none">客户发送给客服的消息总数。</div></div >')
                            break;
                        default:
                            console.log("其他")
                            break;
                    }
                });
            });
$('body').on('mouseover', '.num_right,.help_img', function () {
        $(this).children('div').css("display", 'block')
});
$('body').on('mouseout', '.num_right,.help_img', function () {
        $(this).children(('div')).css("display", 'none')
});