纯css tooltip箭头最稳方案是border三角法，需四边border-width一致、三边transparent、一边实色，容器必须position:relative，箭头用::before并配合left:50%和transform居中，定位偏移量由border-width决定。
纯 CSS 实现带箭头 tooltip，关键不是“怎么加箭头”，而是箭头能否严丝合缝贴边、颜色自动继承、hover 不闪跳——border 三角法是目前最稳的方案，但四个 border 宽度必须一致、三边 transparent、仅一边实色，否则立刻露白边或悬空。
为什么用 border 画箭头而不是 SVG 或 Unicode
SVG 箭头要额外写 <svg></svg> 标签，改个背景色就得同步改 fill；Unicode 字符（比如 "→"）根本不会随父元素 background-color 变色，也对不齐气泡边缘。而 border 三角是零标签、零 JS、自动继承颜色、缩放无锯齿——前提是四边 border-width 一致、三边 transparent、仅一边实色。
- 向上箭头：
border-bottom: 8px solid #333;，其余三边transparent - 向下箭头：
border-top: 8px solid #333;，其余三边transparent - 向右箭头：
border-left: 8px solid #333;，其余三边transparent - 向左箭头：
border-right: 8px solid #333;，其余三边transparent
注意：8px 这个值同时决定箭头大小和定位偏移量，改了它，top/left 值也得重算，否则箭头会飘在半空或压住文字。
::before 箭头必须配合 position: relative 容器
tooltip 主体容器没设 position: relative，伪元素的 position: absolute 就会相对于最近的定位祖先（可能是 body），导致箭头飞到页面任意角落。这是最常被忽略的前提。
- 容器必须有：
.tooltip { position: relative; display: inline-block; } - 箭头用
::before（不用单独 DOM 节点），避免内容撑高后箭头位置断裂 - 如果 tooltip 宽度动态变化（比如响应式或文字长度不固定），
left: 50%; transform: translateX(-50%)是唯一可靠居中方式；只写margin-left: -60px这类固定值，换内容就崩
漏掉 transform 是箭头偏左/偏右的头号原因——因为 left: 50% 是按元素左边缘算的，而 border 三角视觉顶点不在左边缘上。
箭头贴合气泡边缘的定位公式
箭头不是浮在空中的装饰，它必须“长在”气泡边缘上。比如底部箭头，要让它顶点刚好落在气泡底边正中央：
- 气泡设
bottom: 100%（让气泡底边紧贴触发元素顶部） - 箭头设
bottom: 100%+left: 50%+transform: translateX(-50%) - 再加
margin-bottom: -6px（假设border-width是6px），把箭头向上微调，使其顶点与气泡底边严丝合缝
这个 -6px 是关键：border 三角的“高度”就是 border-width，不抵消就错位。
常见错误现象与排查点
箭头悬空、偏左/偏右、颜色不对、hover 时闪跳或消失——这些基本都卡在几个细节上：
- 容器漏了
position: relative - 伪元素用了
content: ""但没设display: block或width/height: 0，导致布局塌陷 -
border-width和margin/transform值没同步调整，比如改了border-width: 10px却还用margin-bottom: -6px - 触发区域和 tooltip 内容区域都设了
pointer-events: none，鼠标一移入就关闭
真正难的不是写出第一个箭头，而是让所有方向、所有尺寸、所有颜色组合下，箭头都严丝合缝地“长”在气泡上——这需要把 border-width 当作核心变量，所有定位值都围绕它推导，而不是凭感觉调像素。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
