最可靠方式是用templet返回带title的span并结合done回调绑定click事件调用layui.tips；因layui原生不支持hover提示，且title属性在渲染时会被覆盖，必须通过事件委托动态绑定，避免重复弹出和移动端失效。
layui table 单元格内容溢出时如何触发 tooltip 气泡
直接用 layui.table 的 templet 配合 layui.tips 最可靠，原生不支持 hover 提示，必须手动绑定事件。表格渲染后 dom 才存在，所以不能在列定义里直接写 title 属性——它会被 layui 覆盖或忽略。
用 templet 返回带 title 的 span 并监听 click
这是最可控的方式：把单元格内容包裹进一个有 title 的 <span></span>，再用 layui.tips 在点击时显示完整文本。注意别用 hover，移动端不响应，且和 layui 自身的 tooltip 冲突。
示例列配置：
{
field: 'desc',
title: '描述',
templet: function(d) {
return '<span class="cell-tip" title="' + (d.desc || '') + '">' +
(d.desc ? d.desc.length > 15 ? d.desc.substring(0, 15) + '...' : d.desc : '-') +
'</span>';
}
}
然后在 done 回调中绑定点击事件：
done: function(res, curr, count) {
// 注意：必须用事件委托，因为分页/重载会重建 DOM
$('body').off('click', '.cell-tip').on('click', '.cell-tip', function(e) {
var $this = $(this);
var fullText = $this.attr('title');
if (!fullText) return;
// 防止重复弹出
if (layui.tips && layui.tips.index) {
layui.tips.close();
}
layui.tips(fullText, this, {
time: 3000,
maxWidth: 300,
tipsMore: true
});
});
}
为什么不用 CSS ellipsis + hover tooltip
CSS text-overflow: ellipsis 看似简洁，但实际问题多：
- 需要固定宽高+
white-space: nowrap+overflow: hidden，而 layui 表格列宽是动态计算的，容易错位 - hover 在触摸设备上无效，且和 layui 的
lay-event点击事件冲突 - 原生
title提示样式不可控、延迟长、无法关闭、不支持换行 - layui 的
lay-tips属性只对按钮类元素生效，table 单元格不识别
移动端适配与性能注意点
点击气泡在手机上要确保可触达，避免误操作：
- 给
.cell-tip加padding: 4px 6px，增大热区 - 避免在
templet中拼接大量 HTML 或调用复杂函数，否则滚动卡顿 - 如果字段含 HTML 标签（如 ），必须先用
layui.util.escape()转义，否则title崩溃或 XSS - 大量数据时（>1000 行），建议加节流：用
setTimeout延迟绑定，或仅对可见行初始化 tips
真正麻烦的是异步加载后的二次渲染——比如搜索重载表格，done 会再次触发，但事件委托已存在，所以要用 off().on() 显式清理，否则一个点击弹出多个气泡。
