Layui数据表格如何实现在标题行添加自定义的帮助说明图标-Layui教程-PHP中文网

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'
  });
});