推荐三种表格单元格tooltip实现方案：1. title属性最简单但样式不可控、移动端无效；2. css+data-*属性可定制样式但不支持交互和移动端；3. javascript动态插入适用于富文本和全端兼容，需注意性能、内存泄漏和xss防护。
用 title 属性最简单，但有局限
直接在 <td> 或 <code><th> 标签上加 <code>title 属性，浏览器会自动显示原生提示框。比如：
<td title="订单号：ORD-2024-7891">ORD-2024-7891</td>这个方法零成本、无需 JS、全浏览器支持。但它的问题很实在：
- 样式完全不可控（字体、颜色、圆角、箭头都改不了）
- 延迟高、消失快，用户稍一偏移就消失
- 不支持换行、HTML 内容或交互元素（比如按钮、链接）
- 在移动端基本无效（iOS Safari 不触发 hover，Android 也常无响应）
用 CSS + data-* 属性实现轻量自定义 tooltip
如果只需要纯文本提示且想控制外观，推荐用 data-tooltip 配合 CSS 伪元素。关键点是利用 :hover::after 渲染内容，并用 position: absolute 定位。
<td data-tooltip="创建时间：2024-05-22 14:30">2024-05-22</td>
td[data-tooltip] { position: relative; }<br>td[data-tooltip]:hover::after {<br> content: attr(data-tooltip);<br> position: absolute;<br> bottom: 125%; left: 50%;<br> transform: translateX(-50%);<br> background: #333; color: #fff;<br> padding: 4px 8px;<br> border-radius: 4px;<br> font-size: 12px;<br> white-space: nowrap;<br> z-index: 1000;<br>}注意：- 必须给宿主元素（如
td）设position: relative，否则absolute会相对于 body 定位 -
white-space: nowrap防止长文本折行撑破提示框 - 移动端仍不生效——这不是 bug，是规范行为；真要支持触屏，得加 JS 监听
click或用focus模拟
需要支持点击展开或富文本？用 JavaScript 动态插入更稳妥
当提示内容含链接、图标、多段文字，或需兼容手机点击展开时，硬靠 CSS 就力不从心了。此时建议用 JS 动态创建 <div class="tooltip-popover"> 并挂载到 <code>body 下。
- 监听
mouseenter（桌面）和click（移动端），避免重复绑定 - 用
getBoundingClientRect()获取td位置，再计算 tooltip 坐标，防止溢出视口 - 记得在
mouseleave或点击空白处时销毁 tooltip 元素，否则内存泄漏 - 别用
innerHTML直接插入用户数据，先用textContent或手动转义，防 XSS
td.addEventListener('mouseenter', e => {<br> const tip = e.target.dataset.tooltipHtml;<br> if (!tip) return;<br> const el = document.createElement('div');<br> el.className = 'tooltip-popover';<br> el.innerHTML = tip; // 仅限可信内容<br> document.body.appendChild(el);<br> // …定位逻辑略<br>});
表格里 tooltip 的性能和可访问性容易被忽略
表格单元格数量大时（比如 100 行 × 20 列），每个 td 都加 title 或监听事件，会明显拖慢渲染和滚动。更隐蔽的问题是可访问性：
- 屏幕阅读器对
title支持不一致（NVDA 读，VoiceOver 默认不读） - 用
aria-label替代title更可靠，例如<td aria-label="状态：已发货，物流单号 SF123456789">已发货</td> - 如果 tooltip 含重要操作（如“重发邮件”按钮），它本身必须能键盘聚焦，且要有
role="tooltip"和aria-describedby关联
