必须给触发元素设position: relative作为tooltip的定位锚点，否则absolute元素会相对于body定位而偏离目标；通过top/left/transform组合控制方向，配合visibility/opacity过渡防闪烁，移动端需JS支持，z-index应合理设置避免被截断。
为什么不能直接用 position: absolute 脱离文档流后乱飞？
因为 absolute 定位的元素会相对于最近的 position: relative（或 absolute/fixed）祖先定位。如果父容器没设 position: relative，它就往上找 —— 常见结果是贴着 body 或视口边缘显示，完全偏离目标元素。
所以必须显式给触发元素（比如按钮、图标）套一层 relative 容器，让 tooltip 的 absolute 有“锚点”：
<div class="tooltip-container"> <button>Hover me</button> <div class="tooltip">This is a tip</div> </div>
.tooltip-container { position: relative; } —— 这一行不能省，否则后续所有偏移（top/left）都失去参照系。
如何控制 tooltip 出现在目标上方/右侧/下方且不越界？
靠 top、left、transform 组合微调位置，但关键在于「默认方向 + 可扩展性」。常见做法是：
立即学习“前端免费学习笔记（深入）”；
- 默认设
top: -10px+left: 50%+transform: translateX(-50%)实现居顶居中 - 用类名区分方向：
.tooltip--top、.tooltip--right，分别覆盖top/left/transform - 右侧示例：
.tooltip--right { top: 50%; left: 100%; transform: translateY(-50%); }
注意：不要依赖 margin 或 padding 调位置 —— 它们会参与盒模型计算，容易和 transform 冲突，导致偏移不准。
hover 触发时 tooltip 闪一下再出现？这是 transition 没配对
常见错误是只给 opacity 加 transition，但没初始化 visibility 或 pointer-events，导致鼠标移入瞬间 tooltip 还在文档流里占位、或响应区域错位。
正确写法要三者协同：
.tooltip { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.2s, visibility 0.2s; }.tooltip-container:hover .tooltip { opacity: 1; visibility: visible; pointer-events: auto; }
漏掉 visibility 会导致过渡开始前 tooltip 已渲染并可能遮挡鼠标，造成 hover 中断 —— 看起来就是“闪一下消失又回来”。
移动端点击触发 tooltip 怎么兼容？
CSS-only 的 :hover 在触摸设备上不可靠（iOS Safari 只在第一次点击时模拟一次 hover，之后失效）。真要支持触控，必须加 JS 控制 show 类：
document.querySelectorAll('.tooltip-container').forEach(el => {
el.addEventListener('click', () => {
el.classList.toggle('show');
});
});
然后把 CSS 从 .tooltip-container:hover .tooltip 改成 .tooltip-container.show .tooltip。别指望纯 CSS 跨平台 —— 尤其当 tooltip 需要键盘焦点（如可 tab 进入）或屏幕阅读器支持时，JS 是绕不开的。
真正容易被忽略的是 z-index 层级：tooltip 必须比同级兄弟元素高，但又不能无脑设 z-index: 9999 —— 它该和触发容器共享 stacking context，否则可能被父容器的 overflow: hidden 截断。最稳的做法是给 .tooltip-container 设 z-index: 1，.tooltip 设 z-index: 2。
