优先用 aria-describedby 配合隐藏文本实现可访问提示，其次用 data-tip + css hover 实现视觉 tooltip，复杂交互需 js 浮层；避免滥用 title 属性。
title属性能显示提示文字，但有严重限制
直接给 <td> 或 <code><th> 加 <code>title 属性确实能触发浏览器原生 tooltip，但实际用起来问题很多：鼠标悬停延迟高、不支持换行、无法自定义样式、移动端基本不触发、键盘用户不可访问。它只适合最简单的辅助说明，比如字段缩写解释。
表格单元格需要可读性强的提示，优先用 aria-describedby 配合隐藏文本
真正可用的方案是把提示内容写成普通文本（比如放在 <span></span> 里），用 aria-describedby 关联到对应单元格。这样既保持语义清晰，又兼容屏幕阅读器和键盘导航。
<td aria-describedby="hint-1">24.5</td><span id="hint-1" class="sr-only">数值为2023年Q3加权平均值</span>.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
想让提示可见且交互友好，用 CSS + data-* 属性控制 hover 显示
如果提示必须视觉可见，别硬套 title，改用 data-tip 存内容，配合 CSS 的 ::after 和 :hover 实现轻量 tooltip。好处是样式可控、无延迟、可加箭头、支持简单 HTML（需 JS 渲染）。
<td data-tip="原始数据来自API v2，含去重逻辑">24.5</td>- CSS 中用
td:hover::after生成提示框，content: attr(data-tip) - 注意避免在小屏或触摸设备上依赖 hover —— 这类设备没 hover 状态
复杂提示（含链接、多段落）必须用 JS 控制的浮层，而非 title
title 值纯文本，不解析 HTML，也不支持事件绑定。一旦提示里要放链接、按钮、或根据内容动态计算字数，就得用真实 DOM 元素 + JS 定位。推荐用 Popover API（Chrome 114+）或轻量库如 tippy.js。
- 手动实现时，监听
mouseenter创建<div class="tooltip">，用 <code>getBoundingClientRect()定位 - 务必监听
mouseleave和focusout清理浮层，否则容易残留 - 不要把提示内容塞进
title再用 JS 读取 —— 这样既绕路又丢语义
真正难的不是怎么显示提示，而是判断提示是否该由表格单元格承载。很多所谓“提示”，其实是数据上下文，应该放在表头说明、图例区，或单独的数据字典页里——强行塞进每个 <td> 只会让表格更难扫读。</td>
