layui table 鼠标 悬浮 弹出提示窗口。 tip tips

table 鼠标 悬浮 弹出提示窗口。

<script>
      layui.use([ 'laydate', 'laypage', 'layer', 'table', 'carousel',
            'upload', 'element' ], function() {
         var laydate = layui.laydate //日期
         , laypage = layui.laypage //分页
         ,layer = layui.layer //弹层
         ,form = layui.form 
         , table = layui.table //表格
         , carousel = layui.carousel //轮播
         , upload = layui.upload //上传
         , element = layui.element; //元素操作
           table.render({
             elem: '#table'
             ,url: '/admin/qiye/group/wai/list'
             ,height: 'full-60'
             ,totalRow: true
            ,cols: [ [
                {checkbox: true, fixed: true}
                ,{field:'id', title: 'ID', width:90,style:'font-size: 12px;'  }
                ,{field:'orderNo', title: '排序', width:90,style:'font-size: 12px;' , edit: 'text' }
                ,{field:'name', title: '分类名称', width:120,style:'font-size: 12px;' , edit: 'text'}
                 ,{field:'name', title: '分类名称2', width:120,style:'font-size: 12px;' , edit: 'text',
                    templet: function(d){
                       // d是当前行数据，data-create-time存储创建时间，class用于绑定事件
                       return '<span class="name-tips" data-create-time="'+ d.createDateTime +'">'+ d.name +'</span>';
                    }
                 }

                 ,{field:'createDateTime', title: '创建时间', width:150,style:'font-size: 12px;'  }
                 ,{field:'remark', title: '备注', width:140 ,style:'font-size: 12px;', edit: 'text'}
                 ,{field:'url', title: '小程序链接', width:320,style:'font-size: 12px;',templet: '#format_url' }

                 ,{fixed:'right', width:120,title: '操作',  toolbar: '#table_bar'}
                ] ]
             ,id: 'table'
             ,page: true
              ,limits:[100,200,300,400,500,1000,2000,3000],
            limit:100
              // ========== 核心修改2：done回调，表格渲染完成后绑定layer.tips悬浮事件 ==========
              ,done: function(res, curr, count){
                 // 绑定name列的悬浮提示
                 $('.name-tips').each(function(){
                    var _this = $(this);
                    // 获取存储的创建时间，兼容空值
                    var createTime = _this.data('create-time') || '无创建时间';
                    _this.hover(
                          // 鼠标移入：显示tips
                          function(){
                             layer.tips('创建时间：'+createTime, _this, {
                                tips: [1, '#333'], // 1=向上显示，#333=背景色（贴合Layui风格）
                                tipsMore: true, // 允许多个tips同时显示
                                area: ['auto', 'auto'], // 宽高自适应
                                time: 0 // 鼠标移开才消失，不自动消失
                             });
                          },
                          // 鼠标移出：关闭tips
                          function(){
                             layer.closeAll('tips');
                          }
                    );
                    // 可选：鼠标悬浮变手型，提示可悬浮
                    _this.css('cursor', 'pointer');
                 });
              }

           });
         
         //监听工具条 table_bar
            table.on('tool(table)', function(obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
               var data = obj.data //获得当前行数据
               , layEvent = obj.event; //获得 lay-event 对应的值
               if (layEvent === 'edit') {
                  edit(data.id);
               } 
            });
            
             //监听  是否显示
              form.on('switch(tp_useIt)', function(obj){
                //layer.tips(this.value + ' ' + this.name + '：'+ obj.elem.checked, obj.othis);
                if(obj.elem.checked){
                   update_useIt(this.value,1);
                }else{
                   update_useIt(this.value,0);
                }
              });
             
            //监听单元格编辑
              table.on('edit(table)', function(obj){
                var value = obj.value //得到修改后的值
                ,data = obj.data //得到所在行所有键值
                ,field = obj.field; //得到字段
                //layer.msg('[ID: '+ data.id +'] ' + field + ' 字段更改为：'+ value);
                table_edit_update(data.id,field,value);
              });
            
             
      });
</script>