abbr 标签的 title 属性必须显式设置才能显示悬停提示，否则无任何提示；其原生 tooltip 不可被 CSS 修改，读屏工具优先读 aria-label，但悬停仅显示 title，自定义交互需改用 span + aria-describedby 方案。
abbr 标签的 title 属性必须显式设置才能显示悬停提示
浏览器不会自动从 abbr 元素内容里提取缩写全称；不写 title，悬停就什么也不显示——这是最常被忽略的前提。
正确写法示例：
<abbr title="HyperText Markup Language">HTML</abbr>
常见错误包括：
- 只写
<abbr>HTML</abbr>（无title，悬停无效） - 误用
alt（abbr不支持alt，会被忽略） - 把长文本塞进
title，导致提示框过长或换行异常（建议控制在 100 字以内）
不同浏览器对 abbr title 提示的渲染行为不一致
Chrome 和 Edge 显示为浅灰色小tooltip，Firefox 默认更靠左且无阴影，Safari 在某些 macOS 版本下延迟略高。这些差异无法通过 CSS 统一覆盖——abbr[title] 的提示框是 UA（用户代理）原生控件，不是页面 DOM 节点。
立即学习“前端免费学习笔记（深入）”；
这意味着：
- 不能用 CSS 修改它的字体、背景色或箭头样式
-
:hover::after伪元素对原生提示无效（只能用于自定义 tooltip 方案） - 无障碍读屏工具（如 NVDA、VoiceOver）会朗读
title值，所以内容需准确、简洁、语义完整
abbr 与 aria-label 混用时 title 仍起主导作用
如果同时写了 title 和 aria-label，多数读屏软件优先读 aria-label，但鼠标悬停仍只显示 title 内容。二者不合并、不 fallback。
推荐做法：
- 保持
title和aria-label含义一致，避免混淆 - 若只需辅助技术支持而无需悬停提示，可省略
title，仅用aria-label（但此时普通用户看不到解释） - 不要依赖
aria-label来“修复”缺失的title
需要自定义样式或交互时，abbr 就不该是首选方案
一旦你想要带图标、动画、点击展开、深色模式适配，或者支持键盘焦点触发，原生 abbr 就力不从心了。这时候应改用 span + aria-describedby + 自定义 tooltip 组件。
简单替代结构示意：
<span role="button" tabindex="0" aria-describedby="tip-1">PDF</span><br><div id="tip-1" class="tooltip" hidden>Portable Document Format</div>
关键点：
- 原生
abbr无法响应click或keydown - 自定义方案要补全键盘导航（
Enter/Space触发）和焦点管理 - 别为了“语义正确”硬套
abbr，而牺牲可用性
abbr 最适合一次性、静态、短小、无需交互的术语标注。只要漏掉 title，它就彻底失效——这点比任何样式细节都关键。 
