HTMLtitle属性使用技巧｜鼠标提示实用方法

HTML 的 `title` 属性常被误当作 tooltip 使用，实则只是浏览器原生、功能极其有限的悬停提示机制：不支持样式、无动画、无法聚焦、移动端基本失效，且主要服务于辅助技术而非用户交互；它仅适用于极少数场景，如缩写全称说明、iframe 可访问性命名等低频补充信息，而真正需要可控、可访问、响应式提示时，必须绕开 `title`，采用 `aria-describedby` + CSS、现代 JS 库或手动实现符合 WCAG 标准的自定义 tooltip 方案——否则不仅体验打折，更会损害无障碍可用性。

title 属性不是 tooltip，别指望它能替代 UI 提示

HTML title 属性只是浏览器原生的、极简的鼠标悬停提示机制，不支持样式、不响应点击、无法聚焦、移动端基本不可靠。它本质是辅助技术（如屏幕阅读器）和浏览器兜底方案，不是前端交互组件。

• 桌面端仅在鼠标悬停 0.5–1 秒后触发，且无动画、无延迟控制
• 移动端 Safari / Chrome 大多忽略 title，长按不会显示（iOS 尤其明显）
• 键盘用户无法通过 Tab 进入或操作该提示，不符合 WCAG 2.1 要求
• 如果元素已有 aria-label 或 aria-describedby，部分读屏器会优先读取它们而非 title

什么时候必须用 title？哪些场景它真有用

真正需要 title 的情况很窄：当内容本身简洁但需补充「非关键、低频、上下文依赖」的信息时，且你明确接受它的限制。

• CSS —— 缩写全称，语义清晰，读屏器会读出