纯CSS实现tooltip渐显需用opacity与visibility配合：默认设opacity:0、visibility:hidden，并在非hover状态定义transition: opacity 0.2s ease, visibility 0s；hover时设opacity:1、visibility:visible，父容器需position:relative且避免overflow:hidden，tooltip用position:absolute+transform定位以优化性能。
用 transition 配合 :hover 控制 opacity 和 visibility
纯 CSS 实现工具提示（tooltip）渐显，核心不是只靠 opacity 动画——直接只设 opacity: 0 → 1 会导致鼠标移入前 tooltip 仍占据布局空间或响应点击。必须搭配 visibility 控制可交互性，且动画属性要写在非 hover 状态上。
常见错误是把 transition 写在 :hover 伪类里，这会导致移出时无动画；或者漏掉 visibility: hidden/visible，造成移入前 tooltip 仍可被聚焦或遮挡内容。
-
visibility: hidden必须初始设置，并配合opacity: 0 -
transition: opacity 0.2s ease, visibility 0.2s要写在默认状态（非 hover），不能只写在:hover里 -
visibility本身不可动画，但配合transition可实现“延迟生效”，需注意其过渡行为是离散的（即不会中间态，但切换时机受 transition timing 影响）
tooltip 元素需脱离文档流，避免影响布局
如果 tooltip 是子元素（比如 <span class="tooltip">?<span class="tooltip-text">说明文字</span></span>），它的 position: absolute 必须相对于父容器（设 position: relative），否则会脱标到 body 下，导致定位错乱。
容易忽略的是：若父容器有 overflow: hidden，绝对定位的 tooltip 可能被裁剪。此时要么改父容器 overflow，要么把 tooltip 挂到 body 下并用 JS 定位——但那就超出纯 CSS 范畴了。
立即学习“前端免费学习笔记（深入）”；
- tooltip 文字容器必须设
position: absolute，且父级加position: relative - 推荐加
pointer-events: none到 tooltip 本身，防止遮挡下方元素；内部文字区域可设pointer-events: auto（如需点击） - 避免使用
display: none/block做显示控制——它无法触发transition
兼容性与性能注意点：transform 替代 top/left 微调位置
用 top/left 移动 tooltip 会触发 layout，而 transform: translateY(-10px) 仅触发 composite，更流畅。尤其在移动端或低配设备上差异明显。
IE10+ 支持 transform 和 opacity 的 transition，但 IE11 对 visibility + transition 的组合支持不稳定（可能出现闪现）。如需兼容 IE，建议 fallback 为无动画的显隐，或用 JS 控制 class 切换。
- 定位偏移优先用
transform: translate()，而非top/left -
will-change: opacity可提前告知浏览器将动画 opacity，但不要滥用（可能引发内存开销） - 动画时长建议 ≤ 0.3s，过长用户感知为卡顿，过短（
一个最小可用示例（含 HTML 结构）
下面这段代码可直接复制使用，已规避常见坑：
.tooltip {
position: relative;
display: inline-block;
}
.tooltip-text {
visibility: hidden;
opacity: 0;
position: absolute;
bottom: 125%;
left: 50%;
transform: translateX(-50%) translateY(6px);
background-color: #333;
color: #fff;
text-align: center;
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
white-space: nowrap;
pointer-events: none;
transition: opacity 0.2s ease, visibility 0.2s;
}
.tooltip:hover .tooltip-text {
visibility: visible;
opacity: 1;
}
关键点都在里面：初始 visibility: hidden + opacity: 0、transition 在非 hover 状态、用 transform 定位、pointer-events: none 防遮挡。
真正难的不是写出来，而是当 tooltip 出现在滚动区域、z-index 层叠复杂、或需要适配暗色模式时，这些看似简单的属性组合会突然失效——那时得回头检查 contain、isolation 或父级 transform 是否意外创建了新的 stacking context。
