纯CSS tooltip箭头需用border三角法实现严丝合缝贴边、自动继承颜色、hover不闪跳；关键在于四边border宽度一致、三边transparent、一边实色，并配合position:relative容器与transform居中定位。
纯 CSS 实现带箭头的 tooltip，关键不是“能不能加箭头”，而是箭头是否严丝合缝贴在气泡边缘、颜色是否自动继承、hover 时是否不闪跳或错位。border 三角法是最稳妥的选择，不需要 JS，但细节一错就露白边或悬空。
为什么用 border 画箭头而不是 ::before 里塞 SVG 或 Unicode
SVG 箭头要额外写一个 <svg> 标签，还得手动设 fill 和尺寸，改个背景色就得同步改 SVG 颜色；Unicode 字符（比如 "→"）根本不会随父元素 background-color 变色，也对不齐气泡边缘。而 border 三角是零标签、零 JS、自动继承颜色、缩放无锯齿——前提是四边 border 宽度一致、三边透明、仅一边实色。
- 向上箭头：
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，不抵消就会在气泡和箭头之间留出一条白缝。渐变或图片背景的 tooltip 不适用此法，得换 clip-path 或 SVG。
IE11 兼容写法要靠层叠覆盖，不是加前缀
IE11 不支持 -ms-transform，强行加前缀没用。正确做法是先写 IE 友好定位，再用现代写法覆盖：
- 先写：
top: 12px; right: 16px; margin-left: -6px;（-6px= border-width / 2） - 再写：
transform: translate(100%, -50%);，高版本浏览器会覆盖掉上面的margin-left
IE 下 margin-left 必须严格等于 border-width 的一半，否则换箭头大小就偏移失效。现代项目若已放弃 IE 支持，可直接删掉这层兼容逻辑，代码更干净。
真正难的不是画出三角，而是让它的顶点、颜色、位置三者始终与气泡主体保持像素级咬合——尤其当 tooltip 背景是深色渐变、字体大小响应式缩放、或内容动态加载时，任何硬编码的偏移值都会在某个临界点突然失效。
