layui tab 可通过自定义 dom + hover 事件 + layer.tips 实现悬停预览缩略图：标题用 data-thumb 存路径，事件委托监听移入读取并展示图片，移出关闭 tips，动态添加 tab 时需用 body 委托绑定。
Layui Tab 选项卡本身不内置“悬停预览缩略图”功能，但可通过自定义 DOM 结构 + hover 事件 + layer.tips 实现。核心是把缩略图地址存进 tab 标题的 data 属性中，在鼠标移入时读取并展示。
标题里预留缩略图地址
添加 tab 时，不要只传 title 字符串，而要用对象形式，在 lay-id 或自定义属性中带上图片路径：
- 推荐写法：在
element.tabAdd()的title参数中嵌入带data-thumb的 HTML - 例如：
title: '<span data-thumb="/img/user-1.jpg">张三</span>' - 确保缩略图 URL 可被浏览器直接访问（建议用绝对路径或带协议的相对路径）
绑定 hover 事件监听标题
Tab 渲染完成后，在 done 回调或 DOM 就绪后绑定事件（不能提前写，否则 li 还没生成）：
- 用事件委托监听
.layui-tab-title li下的 span 或文本容器 - 移入时读取
$(this).find('[data-thumb]').data('thumb') - 移出时关闭 tips（避免残留）
- 注意：Layui 的 tab 标题默认禁用文字选中，需临时加
user-select: text才能触发 hover（不影响功能）
用 layer.tips 显示缩略图
不推荐用 layer.photos（它用于多图全屏预览），这里只需轻量浮层展示一张小图：
- 调用
layer.tips('<img src="'%20+%20thumbUrl%20+%20'" style="max-width:90%">', this, {tips: [2, '#787878'], time: 0}) -
time: 0表示不自动关闭，靠 mouseleave 主动 close - 保存 tips 索引（如
var tipIndex = null），每次 hover 前先layer.close(tipIndex)防重叠 - 样式可加
tipsMore: true避免被父容器 overflow 截断
分页或动态 Tab 场景注意事项
如果 tab 是后续通过 JS 动态添加的（比如菜单点击新增），hover 绑定必须放在 tabAdd 之后，或统一用事件委托绑定到父容器：
- 推荐写法：
$('body').on('mouseenter', '.layui-tab-title li span[data-thumb]', function(){...}) - 避免对每个新 tab 单独 bind，防止内存泄漏
- 若缩略图加载慢，可加 loading 占位或设置
onload后再显示 tips
