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 中存在时才设置该属性
没有这一步，屏幕阅读器用户根本不知道那个浮层和按钮有关联——样式再炫也没用。
