用 :after 而不是额外 DOM 元素加箭头，是因为纯 CSS 利用 border 渲染特性可零宽高画三角，结构干净、语义无污染、便于复用和控制；需设触发元素 position: relative 以精确定位，top/bottom/left/right 配合 transform 和 border-width 计算位置，border-color 控制方向，推荐用 var(--tooltip-bg) 统一颜色，移动端需兼容 hover/focus/touch 三态。
为什么用 :after 而不是额外 DOM 元素
加箭头本质是加一个三角形，而纯 CSS 画三角最轻量的方式就是利用 border 的渲染特性——把一个零宽高元素的三边设为透明，留一边有颜色，就能挤出方向明确的箭头。用 :after（或 :before）避免了在 HTML 里塞空 <div> 或 <span>，结构干净、语义无污染，也方便复用和动态控制显示/隐藏。
关键前提是：触发元素必须设 position: relative，否则 :after 的 position: absolute 会相对于最近的定位祖先或 body 定位，箭头就飘走了。
:after 箭头的位置和方向怎么算准
箭头位置由 top/bottom/left/right 控制，但数值不能凭感觉填。常见错误是“箭头没对齐”或“贴着边框露一半”，根本原因是没扣准 border-width 和内边距。
- 若 tooltip 文本容器上下 padding 各是
8px，箭头想垂直居中，top应设为-8px（不是0或-10px） - 箭头本身宽高为 0，靠
border-width: 6px撑开，那么它占据的空间就是 12×12px；若要让它“顶”在 tooltip 上边缘正中，left应设为50%再配合transform: translateX(-50%) - 方向靠
border-color配合透明色决定：比如上箭头 →border-bottom-color: #333，其余三边透明；右箭头 →border-left-color: #333
箭头颜色和背景不一致？别硬调 border-color
很多开发者发现箭头颜色和 tooltip 背景色有细微色差，尤其在深色模式或使用 CSS 变量时。这不是浏览器渲染问题，而是直接写死 border-color 导致无法继承父级背景色变量。
立即学习“前端免费学习笔记（深入）”；
更健壮的做法是：让箭头用和 tooltip 相同的 background-color，再套一层同色边框模拟“描边”效果：
.tooltip .tooltiptext:after {
content: '';
position: absolute;
top: -6px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border: 6px solid transparent;
border-bottom-color: currentColor; /* 继承父级 color */
}
.tooltip .tooltiptext {
background-color: var(--tooltip-bg, #333);
color: var(--tooltip-text, #fff);
}
/* 让箭头也用 --tooltip-bg */
.tooltip .tooltiptext:after {
border-bottom-color: var(--tooltip-bg, #333);
}
这样换主题时只需改 CSS 变量，箭头自动同步，不用挨个改 border-color。
移动端 hover 失效？得补上 focus 和 touch 逻辑
CSS-only tooltip 依赖 :hover，但在 iOS 和部分安卓设备上，第一次点击触发的是 focus，hover 不生效；纯触摸场景下甚至没有 hover 概念。只靠 .tooltip:hover .tooltiptext 会导致移动端完全不显示。
解决办法不是放弃 CSS，而是用最小侵入方式补行为：
- 给触发元素加
tabindex="0"，让它可聚焦 - 同时写
.tooltip:focus-within .tooltiptext（现代浏览器支持） - 对老设备，用 JS 监听
touchstart并临时加 class，例如.tooltip.is-touched .tooltiptext
真正难的不是画箭头，而是让 :after 在各种交互路径下都稳定出现——hover、focus、touch，三者缺一不可，否则用户在 iPad 上点半天没反应，第一反应永远是“这功能坏了”。
