Layui表格中直接加title属性无效，因其渲染时用<div>包裹内容导致原生提示失效；应使用lay-tips+data-tips配合templet模板或函数动态生成，并注意转义、移动端点击兼容及样式优化。
表格列字段直接加 title 属性为什么没反应？
layui 的 table.render() 默认会把单元格内容用 <div> 包一层，导致原生 title 属性失效——鼠标悬停时根本不会显示浏览器默认提示。这不是 bug，是 layui 渲染结构导致的 dom 脱离了原生语义。
解决思路只有两个：要么改渲染模板让 title 落到可触发的元素上，要么用 Layui 自带的 tips 组件手动绑定。后者更可控、兼容性更好。
用 lay-tips 属性配合 templet 模板实现列级提示
在列配置中使用 templet 返回带 lay-tips 的 HTML，Layui 会在渲染后自动初始化 tips。注意必须同时设置 lay-tips 和 data-tips（内容），且元素需有 style="cursor: pointer" 才能触发 hover 效果。
- 示例写法：
{field: 'name', title: '姓名', templet: '<div lay-tips="{{d.name}}" data-tips="{{d.name}}" style="cursor: pointer;">{{d.name}}</div>'} -
lay-tips是触发标识，data-tips是实际提示内容，二者缺一不可 - 如果提示内容含换行或特殊字符，用
{{layui.util.escape(d.desc)}}预处理，避免 HTML 解析错误 - 不要在
templet里写onmouseover或title，和 Layui tips 冲突
需要动态计算提示内容时怎么写？
当提示内容依赖多个字段、或需格式化（如金额、状态文案），不能靠静态 data-tips，得用 JS 函数生成。这时要把 templet 设为函数，返回 HTML 字符串，并确保 lay-tips 和 data-tips 值一致。
- 写法示例：
templet: function(d) { return '<div lay-tips="' + (d.status === 1 ? '已启用' : '已禁用') + '" data-tips="' + (d.status === 1 ? '已启用' : '已禁用') + '" style="cursor: pointer;">' + d.name + '</div>'; } - 千万别在函数里拼接未转义的用户输入，否则 XSS 风险；优先用
layui.util.escape()处理 - 若提示内容很长，Layui 默认最多显示两行，超出会截断加省略号；想撑开宽度，得额外加 CSS：
.layui-table-tips-main { max-width: 400px; }
移动端 hover 提示失效怎么办？
手机端没有 hover，lay-tips 默认只响应 mouseover。必须显式开启 click 触发，否则 iOS/Android 上点不动。
- 全局配置加：
layui.config({ version: '2.9.1', debug: false }).use(['table', 'tips'], function(){ /* 初始化代码 */ });确保tips模块已加载 - 在
table.render()后加事件监听：table.on('tool(test)', function(obj){ if(obj.event === 'tips'){ /* 不需要额外逻辑，只要模块加载了，click 就自动 fallback */ } }); - 真正起作用的是 Layui 2.8+ 对
lay-tips的增强：它内部已兼容 touchstart，但前提是页面没禁用-webkit-tap-highlight-color，否则点击无反馈
提示内容越简短越好，复杂逻辑建议改用弹层或抽屉式详情，别硬塞进 tips 里。
