abbr 元素通过 title 属性实现悬停显示全称，但仅支持纯文本、样式不可控、移动端失效；需自定义时应改用 data-full + js 动态创建带 role="tooltip" 的提示层，并兼顾无障碍与移动端适配。
abbr 元素本身就能实现悬停显示全称，但默认行为有限abbr 是 HTML5 原生语义化标签，用于包裹缩写词，浏览器会自动在悬停时显示 title 属性内容作为提示。
例如：<abbr title="Cascading Style Sheets">CSS</abbr>，鼠标悬停即出现 “Cascading Style Sheets”。
但要注意：
- title 只支持纯文本，不能含 HTML、换行或样式
- 提示框位置、延迟、外观完全由浏览器控制，无法自定义
- 移动端多数不触发 title（iOS Safari 甚至禁用），无 fallback 时等于失效
想自定义提示样式？必须绕过 abbr 的 title，用 JS + CSS 重做
原生 abbr 的 title 无法覆盖，所以实际项目中若需控制宽高、动画、背景色、箭头或支持移动端，就得放弃它，改用带 data-full 的普通元素：
<span class="custom-abbr" data-full="Application Programming Interface">API</span>
然后配合 JS 监听 mouseenter/mouseleave 动态创建/销毁提示层。
关键点：
- 不要用 onmouseover，它会因事件冒泡重复触发；优先用 addEventListener('mouseenter', ...)
- 提示层 position 推荐 fixed，避免父级 transform 或 overflow: hidden 把它裁掉
- 必须加 role="tooltip" 和动态切换 aria-hidden，否则屏幕阅读器读不到全称
- 移动端需额外监听 focus/blur，否则键盘用户无法访问
常见错误：用 CSS :hover + ::after 模拟提示，但漏了无障碍和移动端
有人尝试这样写：
.custom-abbr:hover::after { content: attr(data-full); position: absolute; }
表面可行，但问题一堆：
- ::after 生成的内容不会被屏幕阅读器朗读，aria-label 也无法作用于伪元素
- 没法加 role 或 tabindex，键盘焦点无法抵达
- 移动端无 :hover，tap 一次就消失，且没有 focus 状态支撑
- 如果父容器有 transform，absolute 定位会相对它偏移，导致提示层错位
最简可靠方案：轻量 JS + 语义化结构 + 无障碍兜底
核心逻辑是「显示时挂载，隐藏时卸载」：
- 创建提示层 DOM，设 role="tooltip"、id、aria-hidden="true"
- 用 getBoundingClientRect() 计算位置，避开视口边缘
- mouseenter 时设 aria-hidden="false" 并显示
- mouseleave + blur 时设回 aria-hidden="true" 并移除 DOM（不是仅 display: none）
- 给目标元素加 tabindex="0"，确保键盘可聚焦
容易被忽略的是：提示层 DOM 必须在每次显示前重新创建，或至少清空内容并重置 aria-hidden —— 复用旧节点却忘了改属性，会导致屏幕阅读器读到上一个缩写的全称。
abbr 的 title，用 JS + CSS 重做
原生 abbr 的 title 无法覆盖，所以实际项目中若需控制宽高、动画、背景色、箭头或支持移动端，就得放弃它，改用带 data-full 的普通元素：
<span class="custom-abbr" data-full="Application Programming Interface">API</span>然后配合 JS 监听
mouseenter/mouseleave 动态创建/销毁提示层。
关键点：
- 不要用 onmouseover，它会因事件冒泡重复触发；优先用 addEventListener('mouseenter', ...)
- 提示层 position 推荐 fixed，避免父级 transform 或 overflow: hidden 把它裁掉
- 必须加 role="tooltip" 和动态切换 aria-hidden，否则屏幕阅读器读不到全称
- 移动端需额外监听 focus/blur，否则键盘用户无法访问
常见错误：用 CSS :hover + ::after 模拟提示，但漏了无障碍和移动端
有人尝试这样写：
.custom-abbr:hover::after { content: attr(data-full); position: absolute; }
表面可行，但问题一堆：
- ::after 生成的内容不会被屏幕阅读器朗读，aria-label 也无法作用于伪元素
- 没法加 role 或 tabindex，键盘焦点无法抵达
- 移动端无 :hover，tap 一次就消失，且没有 focus 状态支撑
- 如果父容器有 transform，absolute 定位会相对它偏移，导致提示层错位
最简可靠方案：轻量 JS + 语义化结构 + 无障碍兜底
核心逻辑是「显示时挂载，隐藏时卸载」：
- 创建提示层 DOM，设 role="tooltip"、id、aria-hidden="true"
- 用 getBoundingClientRect() 计算位置，避开视口边缘
- mouseenter 时设 aria-hidden="false" 并显示
- mouseleave + blur 时设回 aria-hidden="true" 并移除 DOM（不是仅 display: none）
- 给目标元素加 tabindex="0"，确保键盘可聚焦
容易被忽略的是：提示层 DOM 必须在每次显示前重新创建，或至少清空内容并重置 aria-hidden —— 复用旧节点却忘了改属性，会导致屏幕阅读器读到上一个缩写的全称。
role="tooltip"、id、aria-hidden="true"
- 用 getBoundingClientRect() 计算位置，避开视口边缘
- mouseenter 时设 aria-hidden="false" 并显示
- mouseleave + blur 时设回 aria-hidden="true" 并移除 DOM（不是仅 display: none）
- 给目标元素加 tabindex="0"，确保键盘可聚焦
容易被忽略的是：提示层 DOM 必须在每次显示前重新创建，或至少清空内容并重置 aria-hidden —— 复用旧节点却忘了改属性，会导致屏幕阅读器读到上一个缩写的全称。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
