layui表格实现悬浮显示

最终效果图

实现方式

首先进行表格render,设置一个templet。data用于传递悬浮显示的数据

{ field: 'userName', title: '用户名称', align: 'center', minWidth: 100 ,fixed: 'left',templet:function (d) {
     return "<label  class='test' data='"+d.userId+"' >" + d.userName + "</label>";
}},

然后使用tips对该类test 进行悬浮事件处理

$('body').on("mouseenter",".test",function (e) {
	layer.tips("<div style='color:#000000;'>"+$(this).attr("data")+"</div>",$(this),{tips:[3,"#fff"]});

})

注意

在layUI中很多事件，在表格中会被覆盖，所以直接在标签上使用悬浮事件无法使用。
所以一般获取到表格DOM对象，然后再进行事件绑定

$(document).on('click',"#updateIde",function () {}