Layui table如何设置单元格的Title属性为自定义内容-Layui教程-PHP中文网

要在单元格悬停时显示自定义提示文字，必须使用 templet 函数返回带 title 属性的 HTML，并用 layui.laytpl.escape() 转义内容防 XSS；列配置中的 title 属性仅作用于表头，对单元格无效。

直接在列配置里加 title 属性对单元格没用——那是给表头用的。要让鼠标悬停时显示自定义提示文字，必须在单元格内容里手动插入 title html 属性。

单元格 title 是 HTML 属性，不是 Layui 列配置项

Layui 的列定义（field/title/sort 等）不解析或透传 HTML 属性。所谓“单元格的 title”，本质是渲染后 <td> 或其子元素上的 <code>title 属性，只能靠 templet 控制最终 HTML 输出。

title 写在列配置里 → 无效，它只影响表头文字
想让某列每个单元格都有悬停提示 → 必须用 templet 返回带 title 的标签
常见错误：写成 { field: 'name', title: '姓名', title: '这是姓名字段' } ——第二个 title 被覆盖且无意义

用 templet 函数注入 title 属性（推荐）

最稳妥的方式是用函数模板拼出带 title 的 HTML，同时做基础转义防 XSS：

templet: function(d) {
  var tip = d.name || '';
  // 对 tip 做简单转义，避免引号破坏 HTML 结构
  var escaped = layui.laytpl.escape(tip);
  return '<div title="' + escaped + '">' + tip + '</div>';
}

d 是当前行数据对象，确保字段名（如 d.name）存在，否则会报 Cannot read property 'name' of undefined
必须用 layui.laytpl.escape() 处理用户输入内容，否则 tip 含双引号或尖括号会导致 HTML 截断或 XSS
包裹一层 <div> 是为了可控地添加 <code>title；直接返回字符串（如 return tip）无法挂属性
字符串模板写法（慎用）

如果只是展示静态文本、且确定无特殊字符，可用字符串模板，但引号嵌套极易出错：
```
templet: '<div title="{{d.name}}">{{d.name}}</div>'
```
- 双大括号 {{d.name}} 是 Layui 的简单替换，不做任何转义
- 若 d.name 是 Alice "Dev"，生成的 HTML 会变成 <div title="Alice " dev>... → 属性值提前截断 <li>这种写法只适合内部系统、字段值绝对可信的场景</li> <h3>为什么不用 CSS tooltip 或 layer.tips 替代？</h3> <p>原生 <code>title 属性最轻量，浏览器默认支持，无需额外 JS 初始化或监听。而 layer.tips 需绑定事件、管理销毁、处理位置偏移，且在表格滚动/重绘时容易失效。除非需要富文本、箭头定位或交互按钮，否则没必要绕路。
  
  深蓝色网站后台管理系统layui框架模板-AdminPro
  一款深蓝色网站后台管理系统layui框架模板
  
  下载
  
  真正容易被忽略的是转义环节——很多项目上线后才发现用户昵称里的引号让整行表格渲染异常，问题根源就在没对 templet 中的动态内容做 layui.laytpl.escape() 处理。