layui表头加title属性无效，因其渲染时仅读取cols中field、title等字段，忽略自定义title且不保留该属性；原生title在移动端及safari中普遍失效，须用layer.tips()绑定到.layui-table-cell内的span并预埋data-tip数据。
layui 表格的表头（th）不支持直接配置 title 或 show-overflow-tooltip，也没有内置的 header-cell-class-name 类似 Element UI 的机制。想让表头文字 hover 时弹出提示，必须手动干预 DOM，在表格渲染完成后动态绑定事件。
为什么表头加 title 属性无效
Layui 渲染表头时会把原始列定义中的 label 值写死进 th 元素的 innerText，但不会保留你传入的 title 字段；即使你在 cols 配置里硬塞 title: '说明文字'，Layui 也完全忽略——它只认 field、title（作为列名显示）、templet 等有限字段，而表头 DOM 不走 templet 流程。
常见错误包括：
- 在
cols中写{ title: '用户名', title: '点击排序' }—— 后一个title覆盖前一个，且最终不生效 - 用 jQuery 在
done回调里给th直接设.attr('title', 'xxx')—— 多数浏览器对th的原生title支持极差，尤其移动端和 Safari 完全不触发 - 试图用 CSS 强制
th截断 +title，但white-space: nowrap会被 Layui 内部 flex 布局覆盖，text-overflow: ellipsis失效
正确做法：在 done 回调中用 layer.tips() 绑定
这是目前最稳定、兼容性最好的方案，适用于所有 Layui 版本（2.5+），且能控制方向、颜色、延迟等。
关键点：
- 不要操作
th元素本身，而是找它内部的文本容器：Layui 表头实际结构是<th><div class="layui-table-cell"><span>用户名</span></div></th>，真正要绑定事件的是那个span或.layui-table-cell - 必须用
layer.tips()，不能依赖原生title—— 原生提示在 iOS Safari、部分安卓 WebView 中静默失效 - 提示内容建议从列配置中预埋，比如用
data-tip存储：{ field: 'name', title: '用户名', 'data-tip': '用户登录账号，长度6~20位' }
示例代码：
table.render({
elem: '#demo',
cols: [[
{ field: 'name', title: '用户名', 'data-tip': '用户登录账号，长度6~20位' },
{ field: 'status', title: '状态', 'data-tip': '0-禁用，1-启用，2-待审核' }
]],
done: function(res, curr, count) {
// 只绑定当前页的表头单元格，避免重复绑定
layui.$('.layui-table-header th .layui-table-cell').each(function() {
const $cell = layui.$(this);
const tipText = $cell.closest('th').data('tip') || '';
if (!tipText) return;
$cell.on('mouseenter', function(e) {
// 防止多次触发导致多个 tips 叠加
if (window.headerTipIndex) layer.close(window.headerTipIndex);
window.headerTipIndex = layer.tips(tipText, this, {
tips: [1, '#333'], // 上方弹出，深灰背景
time: 0,
maxWidth: 240,
skin: 'layui-layer-tips-header'
});
}).on('mouseleave', function() {
if (window.headerTipIndex) {
layer.close(window.headerTipIndex);
window.headerTipIndex = null;
}
});
});
}
});
移动端适配与事件冲突避坑
表头 tooltip 在移动端容易失效或错位，核心原因有两个：
- 移动端没有
hover，仅靠mouseenter不触发；必须同时监听touchstart，但要注意防止 click 事件穿透 - 如果表格容器有
transform、scale或放在overflow: auto区域内，layer.tips()的定位会偏移
解决方案：
- 把事件监听从
mouseenter改为mouseenter touchstart，并在touchstart后加e.preventDefault()阻止默认行为 - 不用
layer.tips()，改用layer.open({ type: 4 })手动控制位置：取this.getBoundingClientRect()计算坐标，再用style.left/top定位，虽然麻烦但 100% 可控 - 更轻量的替代：放弃气泡，改用点击展开一个
layer.msg()或底部弹窗，适合信息量大的场景
表头 tooltip 最容易被忽略的点是「作用域污染」：表格重绘（如分页、搜索、重载）后，旧的事件监听器还在，新老 th 混在一起，导致 tips 叠加或内存泄漏。务必在每次 done 中先解绑再绑定，或用事件委托到 .layui-table-header 父容器上统一管理。
