浏览器原生不支持纯CSS实现带箭头、可定位、内容换行的悬停释义；title属性样式不可控、延迟固定、无法响应鼠标移动；真正可控方案需HTML+CSS（+可选JS），核心在于position上下文、absolute定位及避免overflow截断。
hover 触发 tooltip 的核心限制在哪
浏览器原生不支持纯 CSS 实现带箭头、可定位、内容换行的悬停释义——title 属性虽然能显示提示，但样式不可控、延迟固定、无法响应鼠标移动。真正可控的悬停释义必须用 HTML + CSS（+ 可选 JS）组合实现，关键在于：元素需有明确的 position: relative 上下文，tooltip 本身要用 position: absolute 脱离文档流，且不能被父容器的 overflow: hidden 截断。
用纯 CSS 实现词汇高亮 + 悬停释义的基本结构
不需要 JavaScript 就能完成基础功能，但 HTML 结构必须合理：
<span class="glossary-term" data-gloss="指在特定语境中临时赋予的含义">语境义</span>
对应 CSS：
.glossary-term {
position: relative;
border-bottom: 1px dotted #007bff;
cursor: help;
}
.glossary-term::after {
content: attr(data-gloss);
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
background: #333;
color: #fff;
padding: 4px 8px;
font-size: 14px;
border-radius: 4px;
white-space: normal;
max-width: 240px;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s, visibility 0.2s;
z-index: 1000;
}
.glossary-term:hover::after {
opacity: 1;
visibility: visible;
}-
data-gloss存放释义，避免污染语义结构 - 用
::after伪元素承载内容，省去额外 DOM 节点 -
white-space: normal允许释义内自动换行，max-width防止过宽 - 不用
display: none是因为 transition 不支持它；改用visibility + opacity
鼠标移入移出抖动、释义消失太快怎么办
这是最常见的交互破绽：用户从术语移向 tooltip 时，鼠标经过空白区域，触发 :hover 离开，tooltip 瞬间消失。解决方法是给 tooltip 和术语之间补一个「过渡区」：
立即学习“前端免费学习笔记（深入）”；
.glossary-term {
/* 原有样式 */
padding-bottom: 6px; /* 下留空隙 */
}
.glossary-term::after {
/* 原有样式 */
margin-top: 4px; /* tooltip 向下偏移 */
}
.glossary-term:hover::after,
.glossary-term:focus-within::after {
/* 保持显示 */
}
/* 关键：扩大 hover 响应区域 */
.glossary-term::before {
content: "";
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 20px; /* 覆盖术语正下方 20px 区域 */
z-index: -1;
}-
::before透明覆盖层把悬停热区向下延伸，让鼠标能“滑入”tooltip - 加
:focus-within是为了键盘用户也能触发展开（配合tabindex="0"） - 如果释义含链接或按钮，必须改用真实元素（非伪元素），否则无法聚焦和点击
需要支持长释义、多段落或 HTML 内容时怎么处理
伪元素无法渲染子标签，content: attr() 只取纯文本。此时必须用真实子元素：
<span class="glossary-term" tabindex="0">
多义词
<span class="glossary-tooltip">
<p>在同一语言中具有两个或以上不同意义的词。</p>
<p>例：‘打’可表示击打、制作、拨打等。</p>
</span>
</span>CSS 中把 .glossary-tooltip 设为 position: absolute，并确保其父级 .glossary-term 有 position: relative 和 z-index。注意两点：
- 务必加
tabindex="0"，否则键盘无法聚焦，:focus-within不生效 - 移动端 Safari 对
:hover支持不稳定，需额外监听touchstart或改用点击展开 - 若页面缩放或字体变化频繁，绝对定位可能错位，建议用
getBoundingClientRect()动态计算位置（这时就得上 JS）
最易被忽略的是可访问性：没有 aria-label 或 role="tooltip"，屏幕阅读器不会朗读释义。哪怕只是静态 tooltip，也该补上 aria-describedby 关联 ID。
