<abbr>标签本身不触发悬停提示，必须配合title属性与CSS :hover伪类或JS才能实现；纯HTML无效，且移动端需JS增强以支持触控。
直接说结论：用 <abbr> 标签本身不会自动触发悬停提示，它只是语义标记；真正实现“悬停显示全称”的效果，必须配合 CSS 的 :hover 伪类 + title 属性，或额外加 JS 增强。纯 HTML 不行，纯 <abbr> 更不行。
为什么 <abbr> 单独用没反应
浏览器对 <abbr> 的默认行为极其有限：它只告诉辅助技术（如读屏软件）这是一个缩略词，但**不渲染任何视觉提示**，也不监听鼠标悬停。你写 <abbr>API</abbr>，页面就只显示“API”，光标移上去什么都不会发生。
常见错误现象：
• 写了 <abbr> 但悬停无气泡
• 检查元素发现标签存在，但样式/交互全无
• 误以为加了 title 就够了——其实没加 CSS 时，title 提示是系统级的、样式不可控、延迟高、移动端不触发
- 必须显式添加
title属性才能提供解释文本，例如：<abbr title="Application Programming Interface">API</abbr> - 仅靠
title无法定制样式、动画或定位，且在 iOS Safari 中基本不响应悬停 - 语义正确 ≠ 交互可用，这是最常被忽略的前提
用 CSS 实现轻量级悬停气泡（推荐方案）
不依赖 JS，兼容性好，适合静态内容。核心是利用 :hover + ::after 伪元素生成提示框。
abbr[title] {
position: relative;
border-bottom: 1px dotted #666;
cursor: help;
}
abbr[title]:hover::after {
content: attr(title);
position: absolute;
bottom: 120%;
left: 50%;
transform: translateX(-50%);
background: #333;
color: #fff;
padding: 4px 8px;
font-size: 12px;
border-radius: 3px;
white-space: nowrap;
z-index: 1000;
}
abbr[title]:hover::before {
content: '';
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px 5px 0 5px;
border-style: solid;
border-color: #333 transparent transparent transparent;
}
- 只作用于带
title的<abbr>，避免误伤 - 用
border-bottom: dotted提供视觉线索，比纯文字更易识别可交互 - 气泡位置用
bottom: 120%避免遮挡原文本，transform: translateX(-50%)居中对齐 - 移动端无效——因为没有
:hover，这点必须提前意识到
移动端适配与 JS 增强的关键点
iOS 和 Android 默认不支持 :hover，所以纯 CSS 方案在手机上完全失效。若需全端一致，必须引入 JS 触发逻辑。
- 简单做法：给
<abbr>加tabindex="0"，再用focus模拟悬停（键盘用户也受益） - 更可靠做法：监听
click（移动端）和mouseenter（桌面），动态插入/移除提示元素 - 注意性能：不要给每个
<abbr>绑定独立事件，用事件委托到父容器 - 避免重复初始化：检查是否已存在提示 DOM，防止多次点击生成多个气泡
- 无障碍要求：提示框需有
role="tooltip"，关联源元素用aria-describedby
真正难的不是写出气泡，而是判断什么时候该用纯 CSS、什么时候必须上 JS，以及如何让屏幕阅读器用户和触控用户获得一致的信息密度。缩略词解析的本质是「降低认知负荷」，如果气泡本身成了干扰项，或者关键信息只藏在悬停里，那就违背了初衷。
