title属性不是tooltip，它仅是浏览器原生的简易悬停提示，不支持样式、点击、聚焦，移动端基本无效，主要服务于辅助技术；仅适用于缩写全称、iframe可访问名称等极窄场景。
title 属性不是 tooltip，别指望它能替代 UI 提示
HTML title 属性只是浏览器原生的、极简的鼠标悬停提示机制，不支持样式、不响应点击、无法聚焦、移动端基本不可靠。它本质是辅助技术（如屏幕阅读器）和浏览器兜底方案，不是前端交互组件。
- 桌面端仅在鼠标悬停 0.5–1 秒后触发，且无动画、无延迟控制
- 移动端 Safari / Chrome 大多忽略
title，长按不会显示（iOS 尤其明显） - 键盘用户无法通过 Tab 进入或操作该提示，不符合 WCAG 2.1 要求
- 如果元素已有
aria-label或aria-describedby，部分读屏器会优先读取它们而非title
什么时候必须用 title？哪些场景它真有用
真正需要 title 的情况很窄：当内容本身简洁但需补充「非关键、低频、上下文依赖」的信息时，且你明确接受它的限制。
-
<abbr title="Cascading Style Sheets">CSS</abbr>—— 缩写全称，语义清晰，读屏器会读出 -
<iframe src="report.pdf" title="月度销售报表 PDF 文件"></iframe>—— 为 iframe 提供可访问性名称 -
<area shape="rect" coords="0,0,100,100" href="#" title="点击进入后台管理">—— 热区缺乏文本时提供说明 - 表格中列头缩写：
<th title="Average Response Time (milliseconds)">ART</th>
title 值里写什么？空格、换行、引号怎么处理
title 是纯字符串属性，浏览器会自动折叠连续空白符（包括换行），所以别指望用 \n 换行生效；引号只要不破坏 HTML 结构就安全。
- 避免写长段落，超过 80 字会被截断或显示异常（尤其 IE/旧 Edge）
- 换行无效：
title="第一行 第二行"和title="第一行 第二行"效果一样 - 可放心用英文引号：
title="Don't click unless confirmed" - 中文引号、全角符号无问题，但别混用导致编码错误（确保页面是 UTF-8）
- 禁止插入 HTML 标签：
title="<strong>危险</strong>"会原样显示为文字，不渲染
想做真正的 tooltip？绕开 title，用 CSS + aria-live 或 JS 库
要可控、可聚焦、可键盘操作、支持样式和动画的提示，title 从根上就不该是你的选择。直接用现代方案更省事也更可靠。
立即学习“前端免费学习笔记（深入）”；
- 轻量级：用
aria-describedby配合隐藏<div id="tip"> + CSS <code>:hover::after（注意 focus-visible 兼容） - 框架内建：React 中用
react-tooltip，Vue 用v-tooltip，都比手搓title更稳 - 无障碍关键点：tooltip 元素需有
role="tooltip"，被触发元素需有aria-labelledby或aria-describedby，且需手动管理focus流 - 别忘了移除原生
title：加了自定义 tooltip 后，记得删掉title属性，否则读屏器可能重复播报
复杂点在于焦点管理和屏幕阅读器时机——很多人只做了 hover 显示，却忘了 keyboard 用户按 Tab 到按钮时 tooltip 没出现，也没办法关闭它。
