不显示提示最常见原因是漏写 title 属性；该属性为必需项，浏览器仅凭它生成悬停文本，且内容须为缩写的准确全称，不可用描述性语句替代。
直接用 <abbr></abbr> 标签就能实现鼠标悬停显示全称，不需要 JS 或 CSS 额外干预，但必须加 title 属性，否则无效。
为什么 <abbr></abbr> 不显示提示？
最常见原因是漏写了 title 属性。浏览器只靠这个属性生成提示文本，<abbr></abbr> 本身不带语义化提示能力。
-
<abbr>CPU</abbr>→ 悬停无反应 -
<abbr title="Central Processing Unit">CPU</abbr>→ 悬停显示完整解释 - 部分屏幕阅读器会朗读
title内容，对可访问性有实际帮助
title 内容写什么才合适？
它应该简洁、准确，不是补充说明，而是严格对应缩写的全称或标准定义。
- ✅
<abbr title="HyperText Markup Language">HTML</abbr> - ❌
<abbr title="a markup language for web pages">HTML</abbr>（描述性语言 ≠ 全称） - ⚠️ 多义缩写需结合上下文，比如
API在前后文明确指“Application Programming Interface”时才用该title，否则可能误导
样式和兼容性要注意什么？
原生 <abbr></abbr> 的悬停提示是系统级 tooltip，样式不可控，且不同浏览器表现略有差异：
- Chrome / Edge：淡黄色背景 + 黑字，无箭头，位置略偏右上
- Firefox：灰色边框 + 白底，提示框更靠近鼠标指针
- Safari：支持但动画延迟略高，iOS 上基本不触发（触屏设备无 hover）
- 无障碍方面：
<abbr></abbr>被主流读屏软件识别为缩写元素，配合title可正确播报
如果需要统一样式、支持触屏、或添加额外交互（比如点击展开），就得放弃原生 <abbr></abbr>，改用 aria-label + 自定义 tooltip 组件——但那就不是纯语义化方案了，得权衡可访问性与体验需求。
