Layui表格表头help图标需用CSS+DOM模拟实现，title仅写文字，通过done回调向th追加图标并绑定mouseenter事件调用layer.tips显示提示。
表头列标题里怎么加 help 图标
直接在 cols 的 title 字段里写 <i class="layui-icon"></i> 是无效的——layui 会把它当纯文本渲染，不解析 html。必须用 css + dom 模拟方式，在标题单元格内插入带悬停提示的图标元素。
实操建议：
- 在
title中只写文字，比如"客户名称"，不要混入任何 HTML - 给该列加一个唯一
field（如"customerName"），便于后续定位 - 利用
done回调，在表格渲染完成后手动向对应th元素追加图标和提示逻辑 - 图标推荐用
layui-icon-help或自定义 PNG，配合:hover显示layer.tips
如何让 help 图标悬停时显示提示框
Layui 原生 layer.tips 不支持点击空白关闭，且默认样式与表格不协调；直接绑定 title 属性又太简陋。稳妥做法是封装一个轻量级提示函数，绑定到图标上。
常见错误现象：
- 图标点击后无反应：没绑定事件，或事件委托目标错（用了
click而非mouseenter） - 提示框位置偏移：未用
position: absolute+top/right精确控制，或父容器没设position: relative - 多次触发重复弹出：没做防抖或未销毁前一个 tips 实例
推荐写法（放在 done 内）：
var $th = $('th[data-field="customerName"]'); // 定位列头
if (!$th.find('.help_img').length) {
$th.append('<span class="help_img"><i></i></span>');
}
$th.find('.help_img i').on('mouseenter', function(e) {
layer.tips('该字段为客户在系统中的唯一标识', this, {
tips: [1, '#e6e6e6'],
time: 0,
skin: 'layui-bg-gray'
});
});
图标样式和 hover 效果怎么统一管理
多个 help 图标如果各自写样式，容易冲突或漏配。建议抽离成全局 CSS 类，避免每个列都重复定义。
关键点：
-
.help_img设为inline-block，宽高固定（如15px），并预留右侧间距 -
.help_img i用background-image加载tips_n.png，:hover切换为tips_h.png - 禁用
user-select: none，否则鼠标划过时图标会“卡住”光标 - 如果用字体图标，确保
layui-icon字体已加载完成，否则首次渲染为空白
为什么点击 help 图标后提示不消失
因为 layer.tips 默认不响应外部点击关闭。这不是 bug，是设计行为。如果你需要点击空白处隐藏，得手动监听 document 的 click 并判断是否在提示框外。
更实际的解法：
- 把
time: 2000改成time: 0（常驻），再加一个右上角 × 关闭按钮 - 或者改用
layer.open({type: 4})自定义 tips，内部用layer.close()绑定关闭逻辑 - 避免在
toolbar或templet里重复初始化 help 图标，否则会叠加事件监听器
最易被忽略的一点：所有 help 图标必须共用同一套 CSS 类名和 JS 事件命名空间，否则多个表格同时存在时，mouseenter 会互相干扰或覆盖。
