应使用 aria-label + css 伪元素替代 title 实现可控提示：aria-label 保障屏幕阅读器朗读，::after 伪元素配合 hover/focus 触发样式化浮层，移动端需补充 touchstart 事件；复杂 html 内容则用 data-tooltip + js 渲染并做 xss 防护。
title属性能实现浮动提示，但有严重局限性
直接给 <td> 或 <code><th> 加 <code>title 属性确实能触发浏览器原生 tooltip，但实际用起来问题很多：延迟长、无法自定义样式、不支持换行、移动端基本不可用、焦点键盘导航时行为不一致。它只是“能用”，不是“该用”。
用CSS + aria-label替代title实现可控提示
现代做法是移除 title，改用 aria-label 提供语义化文本，再配合 CSS 的 ::after 伪元素和 hover / focus 触发视觉提示：
<td aria-label="订单号：ORD-2024-7890，创建于2024-05-12">ORD-2024-7890</td>
对应 CSS：
td[aria-label] {
position: relative;
}
td[aria-label]:hover::after,
td[aria-label]:focus::after {
content: attr(aria-label);
position: absolute;
background: #333;
color: #fff;
padding: 4px 8px;
font-size: 12px;
border-radius: 3px;
white-space: nowrap;
z-index: 1000;
left: 100%;
top: 50%;
transform: translateY(-50%);
margin-left: 4px;
}
- 必须加
position: relative才能让::after相对于单元格定位 -
aria-label值会被屏幕阅读器读出，title在部分场景下反而会被忽略或重复朗读 - 移动端需额外加
touchstart事件监听（CSS hover 不可靠），否则点不触发
表格中多行内容提示要用data-*属性+JS动态渲染
当提示内容含换行、链接或 HTML 结构（比如带状态色块的说明），aria-label 和 title 都不支持解析 HTML。这时得用 data-tooltip 存原始内容，用 JS 渲染浮层：
<td data-tooltip="<strong>异常</strong><br>重试次数：3<br>最后失败时间：14:22">⚠️</td>
关键注意点：
- 不要直接用
innerHTML插入data-tooltip值，必须做 XSS 过滤或仅允许白名单标签 - 表格滚动时，tooltip 容器要脱离文档流（
position: fixed），否则会随表格一起滚动错位 - 监听
mouseenter+focusin，同时处理鼠标和键盘用户
IE11 及旧版 Edge 下 title 是唯一可用方案
如果项目必须兼容 IE11，那只能退回 title —— 但得接受它的缺陷：
- 避免在
title中写超过 60 字符，否则截断不可控 - 不要依赖
title传递关键操作信息（比如“点击删除”，应放按钮内） - 测试时重点看键盘 Tab 进入单元格后，是否能通过
Shift+F10或Alt+T触发（部分旧屏读器支持）
真正难的不是让提示出现，而是让提示在所有设备、所有交互方式、所有辅助技术下都可理解且不干扰主流程。多数人卡在“让它显示出来”，其实更该花时间想“谁会看到它、怎么看到、看到后要做什么”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
