title 属性仅在桌面端鼠标悬停时有效，移动端基本失效，屏幕阅读器支持不稳定，且不支持富文本；仅应在语义明确、有交互行为的元素（如 img、button、a、th/td）上谨慎使用，避免用于 div/span/section 等非交互元素。
title 属性不是“加个提示就完事”的通用开关，它在桌面端鼠标悬停时有效，在移动端基本失效，对屏幕阅读器支持不稳定，且无法承载关键信息或富文本。
哪些元素上加 title 才真正有用
只在语义明确、有交互行为的元素上设置 title，才可能被用户感知到：
-
<img>：配合alt补充说明（如alt="公司Logo"+title="点击查看高清版"） -
<button>或带图标的按钮（如<button aria-label="复制链接"><svg></svg></button>），title可作为视觉辅助，但不能替代aria-label -
<a>链接：当链接文字模糊（如“点击此处”）时，title能补充目标，但更优解是直接写明链接文本 -
<th>或<td>：表格中缩写列名（如<th title="Average Time to Resolution">ATR</th>） - 避免给
<div>、<span>、<section>硬加title——它们默认不可聚焦，旧版 Safari 甚至不触发提示
title 在移动端和键盘导航中基本不可用
iOS Safari 完全不支持 hover，Android Chrome 仅部分支持长按模拟，且无统一反馈；键盘用户 Tab 到元素时，绝大多数浏览器不会自动显示 title 提示。
- 依赖
title做操作指引（如title="点击展开详情"）会导致触屏用户完全不知所措 - 若元素本身无
tabindex="0"，键盘焦点进入后也不会触发title（旧版 Safari 尤其明显） - 屏幕阅读器读取
title的行为不一致：NVDA 可能读，VoiceOver 默认跳过，JAWS 需开启“工具提示朗读”选项 - 真正需要键盘/触屏/读屏友好的提示，应使用
aria-describedby关联可见 DOM 元素，或直接把提示文案写进界面
title 和 aria-label / aria-describedby 别混用
三者定位不同，强行共存反而干扰用户：
立即学习“前端免费学习笔记（深入）”；
-
title是浏览器自动渲染的纯文本 tooltip，视觉层存在，但语义层弱 -
aria-label是覆盖性可访问名称，读屏器优先读它，title会被忽略 —— 同时写title="删除"和aria-label="移除当前项目"，后者生效，前者冗余 -
aria-describedby必须指向真实 ID（如aria-describedby="hint-1"+<div id="hint-1" class="sr-only">删除后不可恢复</div>），比title更可控、可样式化、可本地化 - 表单控件（
<input>、<select>）上设title极易被原生校验气泡覆盖，不如用<label>+aria-describedby显式关联提示
title 的内容限制与常见失效原因
title 值是纯文本，不解析 HTML，也不支持换行或样式；看似写了，但用户看不到，往往是因为底层条件没满足：
- 父容器设了
overflow: hidden或伪元素::before覆盖了整个区域 → 实际悬停对象不是原标签 - 元素设了
pointer-events: none→ 浏览器收不到事件，title根本不触发 - 值含未转义的
&、、<code>>→ HTML 解析出错，整段文本可能截断或显示异常（应写成&、<、>） - 内容超 120 字符或含 emoji → 部分浏览器截断、渲染异常，或在分享卡片中被折叠
- 动态生成的
title（如 Vue 模板中:title="item.tip"）若值为空字符串或null，会残留空 tooltip 框，建议加判断：:title="item.tip || undefined"
真正关键的信息，别塞进 title。它只是个轻量级附属提示，不是语义层基础设施。一不留神，就变成只有鼠标悬停党才能看到的“隐藏彩蛋”。
