纯css tooltip完全可行，但需满足触发元素可hover且提示内容为其dom后代或相邻兄弟；通过:hover+::before/::after控制显隐，用content: attr(data-tooltip)读取提示文本，配合position、transform定位及transition实现动画，但受限于无法感知鼠标位置、焦点状态和滚动容器，移动端safari不支持伪元素hover，且不支持html内容与响应式边界检测。
纯 HTML + CSS 实现的悬浮提示框（tooltip），在不引入 JS 的前提下完全可行，但必须满足两个硬条件：触发元素必须是 hover 可作用的（如 <button></button>、<a></a>、带 tabindex 的 <span></span>），且提示内容必须是其 DOM 后代或相邻兄弟——否则无法用 CSS 伪类控制显隐。
用 :hover + ::before/::after 实现基础 tooltip
这是最轻量、兼容性最好的方案，适合静态文案提示。关键在于把提示文字塞进伪元素的 content 属性里，再用绝对定位撑开位置：
<button class="tooltip-trigger">悬停我</button>
<p>.tooltip-trigger::after {
content: "这是提示文字";
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
background: #333;
color: #fff;
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s, visibility 0.2s;
}</p><p>.tooltip-trigger:hover::after {
opacity: 1;
visibility: visible;
}</p>
注意点：
- 伪元素默认是 inline 级别，
top/left需要父容器设position: relative才能生效 -
visibility: hidden比display: none更合适，因为后者无法触发transition - 移动端 Safari 不支持对伪元素做
hover，所以这个方案在手机上基本无效
用 aria-describedby + [aria-hidden] 实现可访问 tooltip
当提示内容较长、含链接或需屏幕阅读器支持时，必须用真实 DOM 节点。核心是让提示框通过 ARIA 关联到触发元素，并用 CSS 控制显隐：
<button aria-describedby="tip-1">帮助</button> <div id="tip-1" role="tooltip" aria-hidden="true">点击后将跳转至设置页</div>
CSS 控制逻辑：
div[role="tooltip"] {
position: absolute;
background: #222;
color: #fff;
padding: 6px 10px;
border-radius: 3px;
font-size: 14px;
opacity: 0;
pointer-events: none;
transition: opacity 0.15s;
}
<p>button:hover + div[role="tooltip"],
button:focus + div[role="tooltip"] {
opacity: 1;
pointer-events: auto;
}</p><p>/<em> 必须手动同步 aria-hidden </em>/
button:hover + div[role="tooltip"],
button:focus + div[role="tooltip"] {
aria-hidden: false;
}</p>
这里有个坑：aria-hidden 是 HTML 属性，不能靠 CSS 设置——上面那段 CSS 中的 aria-hidden: false 是无效写法。正确做法是用 JS 切换属性，或者干脆放弃动态切换，改用 aria-live 或隐藏式 sr-only 文本替代。
用 data-tooltip 属性避免重复 DOM
如果页面有几十个按钮都需要不同提示，为每个都写一个 <div> 太冗余。可以统一用 <code>data-tooltip 存文案，再用伪元素读取：
<button data-tooltip="保存当前配置">保存</button> <button data-tooltip="重置所有字段">重置</button>
CSS 中这样读取：
button[data-tooltip]::after {
content: attr(data-tooltip);
/* 其他样式同上 */
}
优点是结构干净、维护方便；缺点是无法换行、不支持 HTML 标签（attr() 只返回纯文本）、无法做复杂排版。如果提示里需要加 <strong></strong> 或图标，就得退回到真实 DOM 方案。
真正难的是响应式定位——当提示框靠近视口边缘时，自动翻转方向或调整偏移。CSS 本身没有“检测边界”的能力，这类逻辑必须交由 JS 处理。纯 CSS tooltip 的适用边界很清晰：简单、静态、桌面端为主。一旦需求往交互深度或无障碍深度走，就该考虑用 title 属性兜底，或直接上 Popover API（Chrome 114+）这类原生能力了。
