工具提示箭头方向由border-color四值顺序（上右下左）严格控制，仅一边实色其余透明可形成三角形；居中需配合transform，伪元素::after实现最简洁。
工具提示（tooltip）箭头方向不是靠“猜”或“试”，而是由 border-color 中哪一边有实色、其余三边是否全透明且等宽决定的。方向错了，90%是 border-color 顺序写反，或漏设了 transparent。
箭头方向由 border-color 顺序严格控制
浏览器按上→右→下→左顺序解析 border-color 值（即 border-color: top right bottom left）。只有其中一边为实色、其余三边全为 transparent，才能形成清晰三角形：
- 向上箭头：设
border-bottom为实色，其余三边transparent→border-color: transparent transparent #333 transparent - 向下箭头：设
border-top为实色 →border-color: #333 transparent transparent transparent - 向左箭头：设
border-right为实色 →border-color: transparent #333 transparent transparent - 向右箭头：设
border-left为实色 →border-color: transparent transparent transparent #333
常见错误：把 border-color: #333 transparent transparent transparent 用在向下箭头时误以为“第一个值是上边”，却没意识到它对应的是 top —— 这是对的；但若用在同一规则里想做向右箭头，就完全错位了。
箭头必须用 position: absolute + transform 居中
仅靠 left: 50% 无法让箭头顶点真正居中，因为三角形本身宽高为 0，left: 50% 定位的是元素左边缘，而视觉顶点在 border 斜边交点处：
立即学习“前端免费学习笔记（深入）”；
- 底部箭头：用
bottom: 100%+left: 50%+transform: translateX(-50%) - 顶部箭头：用
top: 100%+left: 50%+transform: translateX(-50%) - 右侧箭头：用
right: 100%+top: 50%+transform: translateY(-50%) - 左侧箭头：用
left: 100%+top: 50%+transform: translateY(-50%)
漏掉 transform 是导致箭头总偏左/偏右的最常见原因。不要用 margin-left: -5px 这类固定偏移 —— 换个 border-width 就得重调。
伪元素 ::after 是最干净的实现方式
不用额外 HTML 标签，直接用 ::after 插入箭头，结构更语义化，也方便复用：
.tooltip .tooltiptext::after {
content: "";
position: absolute;
width: 0;
height: 0;
border-width: 6px;
border-style: solid;
border-color: transparent transparent #333 transparent; /* 向上箭头 */
top: 100%;
left: 50%;
transform: translateX(-50%);
}注意点：
-
content: ""必须存在，否则伪元素不渲染 -
width和height必须为0，否则 border 会被压缩变形 -
border-width决定箭头大小，同时影响定位偏移量（如top: 100%实际是 tooltip 底边到箭头顶点的距离） - 如果 tooltip 主体宽度动态变化，这个方案依然稳定 —— 因为居中逻辑不依赖具体像素值
真正容易被忽略的是：箭头颜色必须和 tooltip 背景色、边框色保持一致层级。比如 tooltip 有 box-shadow 或 border，箭头就得叠在它们之上，否则会出现“悬空”或“断层”感 —— 这时候要检查 z-index 和父容器的 position 是否足够。
