不能。Chrome 92+默认禁用title悬停提示，Firefox和Safari仅在可聚焦元素上有限支持，存在延迟高、无样式控制、不支持键盘访问等问题；应改用aria-describedby配合CSS:hover实现可控、可访问的提示。
title属性在现代浏览器中是否还能可靠触发悬停提示？
不能。Chrome 从 92 版本起默认禁用 title 属性的鼠标悬停提示（tooltip），Firefox 和 Safari 也逐步限制其行为：仅在可聚焦元素（如 <a>、<button>）上显示，且延迟高、样式不可控、不支持键盘焦点访问。这不是 bug，是 WCAG 合规与用户体验演进的结果。
替代方案：用 aria-describedby + CSS 实现可控悬停提示
真正可维护的做法是放弃 title，改用语义化 ARIA 配合纯 CSS 悬停逻辑。核心是：aria-describedby 关联一个隐藏的 <div>，再用 :hover 控制其显隐。这样既保有无障碍支持，又完全掌控样式、定位和触发时机。
关键要点：
-
aria-describedby的值必须匹配提示元素的id，且该元素需设role="tooltip" - 提示容器要用
position: absolute+pointer-events: none，内部文字设pointer-events: auto - 避免用
display: none隐藏提示——屏幕阅读器会跳过；改用visibility: hidden; opacity: 0; pointer-events: none - 悬停目标元素需设
position: relative，否则绝对定位会脱离预期上下文
示例片段：
立即学习“前端免费学习笔记（深入）”；
<button aria-describedby="hint-1">保存</button>
<div id="hint-1" role="tooltip" class="tooltip">Ctrl+S 快捷键可用</div>
.tooltip {
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
background: #333;
color: #fff;
padding: 4px 8px;
border-radius: 3px;
font-size: 12px;
visibility: hidden;
opacity: 0;
transition: opacity 0.15s, visibility 0.15s;
pointer-events: none;
}
button:hover + .tooltip,
button:focus + .tooltip {
visibility: visible;
opacity: 1;
pointer-events: auto;
}
为什么不能直接用 JavaScript 监听 mouseenter/mouseleave？
可以，但没必要。纯 CSS 方案已覆盖绝大多数场景，且无 JS 加载失败或执行延迟风险。若真需 JS 控制（比如动态内容、延迟显示、跟随光标），务必补全以下三点：
- 监听
focus和blur事件，确保键盘用户也能触发提示 - 用
setTimeout延迟显示（如 300ms），避免误触 - 在
mouseleave和blur后加防抖清除定时器，防止提示残留
更关键的是：JS 方案必须手动管理 aria-hidden 和焦点顺序，否则会破坏屏幕阅读器流。
移动端和触屏设备的兼容性陷阱
所有基于 :hover 的 CSS 提示在 iOS Safari 和 Android Chrome 上基本无效——触屏没有“悬停”概念。解决方案只有两个：
- 对触屏设备，改用点击/长按触发（需 JS 监听
touchstart+touchend，并加 500ms 判定为长按） - 或统一降级为始终可见的辅助文本（例如放在按钮下方，用
small标签包裹）
别试图用 @media (hover: hover) 检测——iOS Safari 完全不支持该媒体查询，检测结果恒为 false。
最常被忽略的一点：即使你做了完美悬停提示，如果目标元素本身不可聚焦（比如 <span> 或 <div>），键盘用户根本无法抵达它，整个交互链就断了。要么加 tabindex="0"，要么换用原生可聚焦标签。
