能，但有严格限制：仅鼠标悬停且元素获焦点时触发，仅支持纯文本，不支持html、延迟、定位微调等；移动端基本失效，disabled状态不显示，需配合aria-describedby或可见文案提升可访问性。
title 属性能触发 tooltip 吗？能，但有严格限制
能，但只在鼠标悬停且元素获得焦点（或键盘聚焦）时触发，且仅支持纯文本、无样式、无交互。浏览器原生 tooltip 不支持 HTML 渲染、延迟控制、位置微调或关闭按钮——它只是个轻量级辅助提示，不是 UI 组件。
常见错误现象：title 在移动端几乎不触发（iOS Safari 完全忽略），在屏幕阅读器中可能被跳过或读取时机异常；若按钮是 disabled 状态，Chrome 和 Firefox 都不会显示 title tooltip。
-
title值为空字符串或仅含空白字符时，tooltip 不会显示 - 按钮内含 SVG 或复杂子节点时，tooltip 仍绑定到按钮本身，但悬停热区可能变小（尤其 SVG 未设
pointer-events: all） - 使用
aria-label会覆盖title的屏幕阅读器播报，但不影响视觉 tooltip
button 上写 title 就行？别漏掉可访问性细节
单纯写 title="保存当前设置" 虽能触发 tooltip，但对键盘用户和屏幕阅读器不够友好。原生机制不保证所有用户都能感知该提示。
必须配合以下任一方式补足可访问性：
- 添加
aria-describedby指向一个隐藏的<div id="btn-desc">点击后将立即保存所有已修改项</div>，并用aria-hidden="true"和style="position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;"隐藏它 - 或直接在按钮文本中体现关键信息，例如把“保存”改为“保存（立即生效）”，减少对 tooltip 的依赖
- 避免在
title中重复按钮可见文案，如按钮已是“删除”，title="删除该项"属于冗余
移动端没 tooltip 怎么办？得换思路
原生 title 在 iOS 和 Android 大部分浏览器中不响应长按或触摸悬停，等于失效。不能指望它作为移动端唯一说明手段。
可行替代方案（不引入 JS 库的前提下）：
- 用
aria-label提供语音描述，确保 TalkBack/VoiceOver 可读 - 在按钮旁加一个
<span class="hint-icon">ℹ</span>，配合 CSS 实现点击/聚焦后展开简短说明（用:focus-within或details/summary） - 对关键操作按钮，在首次进入页面时，用 CSS 动画高亮 + 简短气泡（绝对定位 +
opacity过渡），但需手动控制展示一次，避免骚扰
注意：title 在移动端无法通过 CSS 控制样式或行为，任何试图用 ::after 伪元素模拟 tooltip 的方案，都会与原生 title 冲突，且不可靠。
什么时候该放弃 title，改用真实 tooltip 组件？
一旦出现以下任一需求，title 就不该再用：
- 需要支持富文本（比如带链接、换行、强调）——
title会自动折叠空白、忽略标签 - 要求 hover 延迟 300ms 显示、500ms 淡出 —— 原生无配置项
- 按钮在滚动容器中，tooltip 需随滚动自动重定位 ——
title固定相对视口，不跟随滚动 - 要兼容旧版 IE（
title行为在 IE8–11 中差异大，比如对display: flex子项支持不稳定）
这时候应选轻量 JS 方案，如 tippy.js 或手写基于 mouseenter/mouseleave + position: fixed 的最小实现，而不是硬撑 title。
原生 tooltip 看似简单，但它的“隐形规则”比想象中多：触发条件窄、语义弱、跨端不一致。真正稳妥的做法，是把它当作最后兜底手段，而不是默认首选。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
