tooltip箭头偏移或消失是因为::after未继承颜色/边框方向或父容器缺position:relative；需设四边transparent边框、用currentColor、border-width控尺寸、transform+left/top精准定位；z-index需配合position:absolute，避免overflow裁剪；hover闪跳应填补触发区间隙并用opacity过渡。
为什么 tooltip 箭头总偏移或消失？
因为伪元素 ::after 没有正确继承颜色或边框方向，或者父容器没设 position: relative，导致箭头定位基准错乱。常见现象是箭头出现在左上角、变成一条横线、或完全不可见。
- 必须确保父容器有
position: relative，否则::after会相对于body定位，箭头位置彻底失控 -
border必须四边都设为transparent，只留一边有色（如border-bottom-color: #333），否则无法形成三角形 - 若用
currentColor做箭头色，要确认父元素的color已显式设置，否则可能继承到透明或意外色值 - 箭头尺寸由
border-width决定，6px 边框 ≈ 12px 宽高三角，不要混用px和em单位
怎么让箭头精准指向触发元素中心？
靠 transform: translateX(-50%) 配合 left: 50% 是最稳的方式，不依赖 tooltip 宽度变化。但方向不同，箭头锚点逻辑也不同。
- 顶部箭头：
top: -6px; left: 50%; transform: translateX(-50%)，箭头底边对齐 tooltip 顶边 - 底部箭头：
bottom: -6px; left: 50%; transform: translateX(-50%)，箭头顶边对齐 tooltip 底边 - 右侧箭头：
top: 50%; right: -6px; transform: translateY(-50%)，箭头左边对齐 tooltip 右边 - 左侧箭头：
top: 50%; left: -6px; transform: translateY(-50%)，箭头右边对齐 tooltip 左边
z-index 和遮挡问题怎么解？
z-index 失效不是因为数值小，而是因为 tooltip 元素本身没设 position。纯 z-index 在 position: static 下完全无效。
- tooltip 主体和
::after箭头都必须带position: absolute，且至少一个有明确z-index - 避免在祖先元素上写
overflow: hidden或clip-path，它们会裁剪掉绝对定位的箭头 - 若 tooltip 在 modal 或 drawer 里显示异常，优先检查 modal 的
transform是否创建了新的 stacking context - 箭头颜色建议用
border-color: currentColor，而不是硬编码，方便主题切换时自动同步
hover 闪跳或延迟出现怎么办？
闪跳本质是鼠标从触发元素移到 tooltip 途中经过空白间隙，:hover 状态中断。这不是动画问题，是结构断层。
- 给 tooltip 添加
pointer-events: none，再给::after箭头单独设pointer-events: auto，能显著减少移入丢失 - 更可靠的做法是把 tooltip 和触发元素包裹在同一
position: relative容器内，并让 tooltip 的top/left值留出 4–8px 缓冲区，物理上填补空隙 - 不要用
display: none控制显隐——它会破坏 transition；改用visibility: hidden+opacity: 0+transition: opacity .2s, visibility .2s - 如果 tooltip 要支持键盘聚焦（如
tab进入），必须加tabindex="0"和:focus-within规则，否则可访问性失效
箭头本身不难画，难的是让它始终“粘”在该在的位置——这取决于定位上下文是否干净、层级是否可控、以及 hover 区域是否连贯。任何一环松动，都会让提示框看起来像在跟用户捉迷藏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
