abbr 标签本身不触发悬停提示，需配合非空 title 属性才能显示原生 tooltip；但移动端失效且读屏器支持弱，故应保留 title 保障语义，再用 data-title + JS 实现跨设备可控提示层。
abbr 标签本身不“做”悬停效果，它只提供语义；真正触发浏览器原生提示的是 title 属性——没这个属性，abbr 就等于 span。
为什么鼠标悬停没反应？
最常见原因就是漏写了 title 属性，或者写了但值为空：title="" 或 title=" "。浏览器只认非空、纯文本的 title 值，且必须是缩写的准确全称。
- ✅ 正确：
<abbr title="Cascading Style Sheets">CSS</abbr> - ❌ 无效：
<abbr>CSS</abbr>（无title） - ❌ 无效：
<abbr title="">CSS</abbr>（空值） - ⚠️ 不推荐：
<abbr title="a style language">CSS</abbr>（不是标准全称）
桌面端能用，移动端基本失效
Chrome/Firefox 桌面版会显示系统级 tooltip，但 iOS Safari 和 Android Chrome 几乎不响应长按或点击，title 在触屏设备上既不弹出也不被朗读——这不是 bug，是规范允许的行为。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 屏幕阅读器（如 VoiceOver）可能跳过无
tabindex的abbr元素 - 纯靠下划线或虚线样式无法传达“可交互”，视觉线索 ≠ 可访问性
- 如果页面 70% 流量来自手机，仅靠
title等于没提供解释
要稳定支持所有设备，得绕开原生 title
保留 abbr[title] 保障语义和读屏器支持，再用 data-title 存全称，配合 JS 和 CSS 实现可控提示层。
立即学习“前端免费学习笔记（深入）”；
- HTML 结构：
<abbr title="JavaScript Object Notation" data-title="JavaScript Object Notation">JSON</abbr> - 监听
mouseenter而不是onmouseover，避免事件冒泡重复触发 - 提示层用
position: fixed，防止父级transform或overflow: hidden错位 - 必须加
role="tooltip"和动态切换aria-hidden，否则读屏器读不到 - 移动端补监听
focus/blur，键盘用户才能通过 Tab 访问
真正难的不是写个 tooltip，而是让同一份内容在鼠标、手指、键盘、读屏器下都自然可感知——abbr 是语义起点，title 是底线，而 data-title + JS 才是落地的必选项。
