title属性在表格中常失效，主因为空值、overflow截断或pointer-events禁用；稳定方案是aria-label+CSS伪元素（需relative定位），移动端需ontouchstart；复杂需求必须用JS实现。

直接给 <td> 或 <code><th> 加 <code>title 属性最快，但仅限桌面端鼠标悬停、样式不可控、移动端基本无效——真要稳定可用，得用 aria-label + CSS 伪元素，或 data-tooltip + JS。

为什么 title 在表格里经常“点了没反应”？

不是代码写错了，而是浏览器根本没触发它。常见卡点有三个：

财经HTML高端海报生成

复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP

下载

• title 值为空字符串、纯空格，或只含换行符 —— 浏览器直接跳过渲染
• <td> 内容被 <code>overflow: hidden 截断，又没配 white-space: nowrap —— 悬停区域变小甚至消失
• 用了 pointer-events: none，或父级有绝对定位遮罩层（比如 loading 蒙层）—— 鼠标事件传不到单元格

用 aria-label + ::after 实现可控气泡

这是目前最平衡的方案：语义正确、零 JS、样式可调、PC 端 hover 可靠。关键不是“怎么写”，而是“怎么挂”：

• 必须给 <td> 加 <code>position: relative，否则 ::after 会相对于 <table> 定位，飘走 <li>提示文字存在 <code>aria-label 里，既供屏幕阅读器朗读，又让 content: attr(aria-label) 可取值
• 移动端需额外加 ontouchstart="" 到 <td> 上，否则 iOS Safari 不触发 <code>:hover
• 箭头靠 ::before + border 实现，注意 z-index 要设够高，不然被相邻单元格盖住

需要换行、HTML 或点击交互？该上 JS 了

当提示内容含 <strong></strong>、状态色块、链接，或要支持键盘焦点、滚动跟随、防抖隐藏时，title 和纯 CSS 都撑不住：

立即学习“前端免费学习笔记（深入）”；

• 用 data-tooltip 存原始 HTML 字符串，JS 渲染时必须做 XSS 过滤（推荐 DOMPurify 或白名单标签）
• tooltip 容器要用 position: fixed，否则表格滚动时它会跟着移位
• 监听 focusin 和 mouseover 双事件，兼顾键盘和鼠标用户
• 别把 tooltip 插进 <td> 内部 —— 会破坏表格布局流，应挂到 <code>document.body 下

  真正难的不是“怎么弹出来”，而是“什么时候该放弃 title”。只要需求里出现“移动端”“换行”“点击展开”“颜色定制”任意一个词，title 就该立刻退场。它只是个桌面端快捷补丁，不是提示系统的起点。