Layui表格单元格内容太长显示不全怎么hover显示-Layui教程-PHP中文网

Layui表格单元格溢出内容需用templet返回带data-content的元素，再委托mouseenter事件调用layer.tips()并配time:0和mouseleave清除，同时注意DOM传参、z-index、转义及事件委托防重复。

layui table 单元格内容溢出不显示全，hover 怎么触发 tooltip

直接给单元格加 title 属性最简单，但 layui 的 table.render() 默认会把单元格内容转义、截断或包裹在 div 里，原生 title 基本失效。得手动接管 hover 行为，用 layui 自带的 layer.tips() 或 css overflow: hidden + :hover::after 都不靠谱——前者要监听事件、后者无法动态取内容。正确解法是利用 layui 的 cellminwidth 和自定义 templet 配合 layer.tips() 主动控制。

templet 里用 `layer.tips()` 绑定 hover 事件

必须在列配置中用 templet 返回带 data-content 的元素，再统一委托事件。不能在 templet 里直接写 onmouseover，否则渲染多次会重复绑定；也不能用 layer.tips() 的自动触发模式，它依赖 title，而 Layui 会清空它。

在 cols 中对需要提示的列写 templet: function(d) { return '<div class="layui-table-tip" data-content="' + (d.xxx || '') + '">' + d.xxx + '</div>'; }
渲染完表格后，用 layui.$(document).on('mouseenter', '.layui-table-tip', function() {...}) 委托，避免重复绑定
在事件回调里调用 layer.tips($(this).data('content'), this, { tips: [1, '#787878'], time: 0 });，time: 0 是关键，否则鼠标一移就消失
必须配 mouseleave 清除 tips：layer.closeAll('tips');，否则多个提示层堆叠

为什么不用 CSS `text-overflow: ellipsis` + `:hover` 模拟

看起来省事，但实际在 Layui 表格里行不通。因为：

Layui 单元格默认有 padding 和 line-height，纯 CSS 需要精确设置 white-space: nowrap、overflow: hidden、text-overflow: ellipsis，且父容器必须定宽——而 Layui 列宽是动态计算的，minWidth 和 width 行为不一致
:hover::after 无法读取 DOM 内容，只能写死或靠 JS 注入，失去灵活性
移动端 hover 不触发，而 layer.tips() 可兼容 click（加个判断即可）
当内容含 HTML 标签时，text-overflow 直接失效，必须走 JS 渲染

容易被忽略的细节和坑

三个地方不注意，hover 提示就卡住或错位：

layer.tips() 的第二个参数必须是原生 DOM 元素，不能传 jQuery 对象，否则定位偏移——写 this，别写 $(this)
如果表格启用了 height 和滚动条，tip 层可能被遮挡，需加 z-index: 999999 到 .layui-layer-tips，或改 layer.config({ zIndex: 10000 })
内容含单引号、双引号或换行符时，data-content 会破坏 HTML 结构，必须用 layui.util.escape() 转义：data-content="' + layui.util.escape(d.xxx || '') + '"
表格重载（table.reload()）后，事件委托依然有效，但若用了 done 回调里重新绑定，就会重复——只绑一次，用事件委托即可