layui表格中tooltip需用layer.tips配合事件委托实现：在templet中存data-tip，renderDone后绑定mouseenter/mouseleave事件，用success回调定制样式并节流防重复，注意IE11兼容及滚动跟随。
layui table 的 templet 里怎么塞 Tooltip？
直接在 templet 返回的 HTML 字符串里加 title 属性没用——Layui 表格默认禁用原生提示，且不自动初始化 lay-tips。得手动触发或换方式。
推荐做法：用 lay-tips 自带的自定义内容能力，配合 event 绑定 + layer.tips 手动控制，避开表格重绘时 tooltip 销毁的问题。
- 别在
templet里写title="xxx"，它会被表格渲染逻辑忽略 - 把 tooltip 内容提前存在
data-*属性里，比如data-tip="超长描述文本" - 用
table.on('renderDone', ...)或done回调，在表格渲染完后统一绑定事件
为什么 lay-tips 在表格里经常不显示？
因为 Layui 表格会频繁重绘（如分页、排序、搜索），而 lay-tips 是一次性绑定 DOM 的，重绘后绑定失效；同时，lay-tips 默认只监听 mouseenter，但表格单元格可能被 td 嵌套、事件冒泡被截断。
- 表格内 tooltip 必须用事件委托，不能直接
$('td').on('mouseenter', ...) - 优先监听
table容器，再用e.target判断是否命中带data-tip的元素 - 避免在
templet中直接调用layer.tips()，会导致重复弹出、定位错乱
如何用 layer.tips 实现自定义样式？
layer.tips 比 lay-tips 更可控，支持 class、maxWidth、fixed 等参数，适合表格这种动态场景。
table.on('renderDone', function(obj){
$(obj.elem).next().on('mouseenter', '[data-tip]', function(e){
var tip = $(this).data('tip');
layer.tips(tip, this, {
tips: [1, '#333'], // 方向+背景色
time: 0,
maxWidth: 240,
skin: 'layui-layer-tips-custom',
success: function(layero){
layero.find('.layui-layer-content').css('font-size', '12px');
}
});
}).on('mouseleave', '[data-tip]', function(){
layer.closeAll('tips');
});
});
-
skin参数必须设为自定义 class 名，否则无法覆盖默认样式 -
success回调里操作 DOM 是唯一可靠时机，layer.tips渲染完才执行 - 务必配对
mouseleave关闭，否则多个 tooltip 叠加、内存泄漏
兼容性与性能要注意什么？
表格行数多（>500）时，每行都绑事件委托没问题，但频繁触发 layer.tips 创建销毁开销大；IE11 下 data-* 取值要兜底，且 layer.tips 的 fixed 在 fixed 容器里可能偏移。
- 加节流：用
setTimeout+clearTimeout防止快速划过触发多次 - IE11 请用
$(this).attr('data-tip')替代.data('tip') - 如果表格容器有
transform或overflow: hidden，layer.tips可能被裁剪，此时加position: relative到父级并设z-index
真正麻烦的是 tooltip 位置随滚动变化——它不跟随单元格滚动，只能靠 layer.tips 的 follow 参数或监听 scroll 手动更新，这个点很容易漏掉。
