tooltip总在屏幕边缘被裁剪，根本原因是position: absolute定位基准错误：若触发元素未设position: relative，tooltip会相对于body定位而溢出；必须确保其直接父容器有position: relative且tooltip为直接子节点。
tooltip为什么总在屏幕边缘被裁剪？
根本原因是 position: absolute 的定位基准错了。它默认往上找最近的「非 static 定位祖先」，如果触发元素（比如按钮）没设 position: relative，tooltip 就会相对于 定位——一旦宿主靠近右/下边缘，tooltip 就直接溢出视口或被 overflow: hidden 裁掉。
- 必须确保 tooltip 的**直接父容器**（即触发它的那个 DOM 元素）有
position: relative - tooltip 元素必须是该容器的**直接子节点**，不能 append 到
document.body - 避免在触发元素上用
transform：它会创建新层叠上下文，导致定位基准失效 - 检查父级是否有
overflow: scroll且未配position: relative，这是滚动时错位的头号原因
纯 CSS 实现“贴右/贴下”的自适应逻辑
CSS 本身不判断屏幕坐标，但可以通过组合 left/right、top/bottom 和 max-width 视觉上实现“自动贴边”效果。关键不是固定偏移，而是用对立方向属性覆盖默认行为。
- 默认右贴边写法：
right: 0; left: auto;（而非left: 100%） - 配合
max-width: 80vw防止超宽文字撑破视口 - 居中仍用
left: 50%; transform: translateX(-50%)，不要用margin-left: -60px这类固定值 - 箭头伪元素的
left: 50%和transform: translateX(-50%)必须同步，否则视觉偏移
如何用媒体查询做最小干预的边缘兜底？
当触发元素离右边缘太近（比如小于 tooltip 宽度），纯 CSS 没法动态计算，但可以用媒体查询 + 类名切换做轻量适配，比 JS 方案更稳定。
- 给宿主元素加一个
data-edge="right"属性，CSS 里写：[data-edge="right"] .tooltip { right: 0; left: auto; } - 移动端小屏兜底：
@media (max-width: 768px) { .tooltip { left: 0; right: auto; } } - 若需支持多方向，建议用 JS 检测
getBoundingClientRect()后加 class，CSS 只负责样式映射，不参与逻辑 - 别依赖
hover做方向判断——iOS Safari 对非可聚焦元素不触发:hover，会导致方向逻辑失效
箭头怎么严丝合缝贴在气泡边缘？
border 三角法最稳妥，但偏移值必须和 border 宽度严格匹配，漏掉 transform 或算错补偿值，箭头就悬空或压字。
- 朝右箭头示例：
border-left: 6px solid #333; top: 50%; right: -6px; transform: translateY(-50%); - 这里的
-6px是关键：它等于border-width，用来把箭头根部拉到气泡右边缘线上 - 如果 tooltip 圆角是
4px，箭头根部宽度建议 ≤8px，否则视觉上会“撑开”圆角 - 所有方向的
top/bottom/left/right值都必须和 border 宽度一致，改一个就得全调
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
