HTML全局属性Title与Tooltip插件之差异化选择

title悬停无反应的常见原因有：pointer-events: none、父容器overflow: hidden、元素不可聚焦（需加tabindex="0"）、伪元素覆盖原元素、iOS Safari不支持；data-tooltip+CSS:hover可替代但需注意定位、z-index、pointer-events等细节；含HTML、需键盘导航、动态加载或智能避让时必须用JS tooltip；手写tooltip须添加aria-describedby、id和role="tooltip"以保障可访问性。

title属性为什么悬停没反应

写了 title="提示内容" 却没弹出提示？常见原因就这几个：

• 元素设置了 pointer-events: none，浏览器压根不接收悬停事件
• 父容器用了 overflow: hidden，虽然 title 提示框本身不会被裁切（它走的是系统级浮层），但开发者常误以为是它被挡了，其实问题在自定义 tooltip 上
• 元素不可聚焦且无交互语义（比如纯 div 在旧版 Safari 中需加 tabindex="0" 才能触发）
• 伪元素（如 ::before）完全覆盖了原元素区域，实际悬停的是伪元素——而伪元素不继承 title

注意：title 在 iOS Safari 中基本不响应悬停，移动端点按也不稳定，别把它当主要交互手段。

data-tooltip + CSS :hover 能替代 title 吗

能，而且更可控，但得避开几个坑：

• 触发元素必须设 position: relative，否则 ::after 提示框会相对 body 定位，飘走
• 别用 title 存提示文本，改用 data-tooltip——避免和原生冲突，也方便 JS 后续接管
• opacity + transition 比 visibility: hidden/visible 更顺滑；pointer-events: none 必须加在提示框上，否则鼠标移过去会意外触发 :hover 离开
• z-index 很容易失效：如果父容器有 transform 或 will-change，会创建新层叠上下文，导致提示框被盖住

示例关键片段：

.tooltip { position: relative; }<br>.tooltip::after { content: attr(data-tooltip); position: absolute; bottom: 125%; left: 50%; transform: translateX(-50%); opacity: 0; transition: opacity 0.2s; pointer-events: none; }<br>.tooltip:hover::after { opacity: 1; }

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

什么时候必须放弃 title 用 JS tooltip

出现以下任一情况，title 就该让位了：

• 提示内容含 HTML（比如带链接的「<a href="/help">查看帮助</a>」）
• 要支持键盘导航（Tab 进入、Esc 关闭）、点击唤出、或移动端 touchstart 响应
• 提示需动态加载（如调 API 获取实时库存），title 是静态字符串，无法绑定异步数据
• 要智能避让视口边界（比如元素在右边缘时提示框自动左出）

JS tooltip 的核心不是“怎么显示”，而是“什么时候销毁”：每次 showTooltip() 前必须检查并移除已存在的旧实例，否则内存泄漏+多层重叠。

可访问性链路最容易被忽略的一环

title 天然支持屏幕阅读器——它会被直接读出，且自动关联到当前元素。但手写 tooltip 时，90% 的人忘了加 aria-describedby：

• 给触发元素加 aria-describedby="tooltip-id"
• 给提示框加 id="tooltip-id" 和 role="tooltip"
• 若提示框是 JS 动态插入 document.body 的，还得确保它在 DOM 中存在时才设置该属性

没有这一步，屏幕阅读器用户根本不知道那个浮层和按钮有关联——样式再炫也没用。