layui中实现table单元格鼠标悬浮提示功能

前两天在工作中需要实现一个提示功能，大致效果如下
表格在一个弹窗中，在鼠标悬浮在表格中的讲师名称上时，需要展示一个提示框。
因为layui中没有提供鼠标悬浮事件，所以我们在使用时，需要使用templet，在后面返回一个div，label或者其他的标签，只要能够将正常表格中的数据展示出来，并且能够使用鼠标悬浮事件就可以。
接下来，鼠标悬浮事件触发之后，可以使用layui中提供的tips来实现这个提示的效果。

首先要在讲师名称这个field中加templet

table.render({
                elem: '#layuitable'
                ,url:'接口'
                ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                ,where: {
                    pxbid:pxbid
                }
                ,cols: [ [
                    {field:'starttime', title: '日期',width:'15%'}
                    ,{field:'intervaltime', title: '授课时间',width:'20%', templet:function (d){
                            return d.timetype + d.intervaltime;
                        }}
                    ,{field:'soursename',title: '课程名称',width:'20%',}
                    ,{field:'teachername',title: '讲师名称',width:'10%',templet:function (d) {
                            return "<label id='test"+d.teachername+"' οnmοuseοver=\"show('"+d.teachername+"');\" οnmοuseleave='closeTips();'>" + d.teachername + "</label>";
            }}
                    ,{field:'place', title: '地点'}
                ]]
                ,id: 'idTest'
                ,parseData:function(res) {
                    data = res;
                    console.log(data);
                }
            });

上面的代码中，可以看到，给label设置了动态的id，以便接下来tips可以吸附在我们鼠标悬浮所在的单元格。

接下来编写鼠标悬浮时触发的事件和鼠标离开时触发的事件

		var tipsVal;
        function show(obj) {
            var introduce;
            var teachername = obj;
            var list = data.data;
            var node = "#test"+teachername;
            console.log(node);
            for(var i = 0;i<list.length;i++){
                if(teachername === list[i].teachername){
                    introduce = list[i].teacherintroduce;
                }
            }
            tipsVal=layer.tips("<div style='color:#000000;'>"+introduce+"</div>",node,{tips:[3,"#fff"]});
        }
        function closeTips() {//关闭显示的信息
            layer.close(tipsVal);
        }

注意要拼接好label的id以及js代码中tips方法中的id，tips的具体使用方法可以在官网的弹出层中查看
如果tips没有吸附在自己想要的元素上，可以看一下id是否正确，或者是layer是不是parent.layer，可以研究一下。

我在编写的时候，一开始表格没有放在弹窗之中，tips位置可以正常显示，放在弹窗之中后，tips始终显示在左上角，去掉了parent.layer后可以正常显示了。

我只是分享一下自己的写法，可以实现相应的效果，仅供参考。