Tooltip箭头颜色无法继承父元素color或fill，须单独设置background-color（实心）或border-color（三角），且border需重写完整声明并匹配方向、样式与宽度。
Tooltip箭头颜色改不了？问题出在伪元素继承限制上
直接说结论：::before 或 ::after 生成的箭头无法通过父元素的 color 或 fill 继承变色，必须单独设置其 background-color（实心箭头）或 border-color（三角边框箭头）。这是最常卡住的地方。
用 border-color 实现三角箭头时怎么换色
很多 Tooltip 用 border 技巧画箭头：单边有颜色、其余三边透明。改色必须重写整个 border 声明，不能只调一个值。
-
border-top/border-bottom/border-left/border-right中哪一边非 transparent，就决定箭头朝向 - 要改颜色，得同步调整对应方向的
border-color，比如向下箭头依赖border-top-color: #3b82f6，就不能只写color: #3b82f6 - 别漏掉
border-style: solid和border-width，否则箭头不显示
.tooltip::after {
content: "";
position: absolute;
top: -8px;
left: 10px;
border: 4px solid transparent;
border-bottom-color: #3b82f6; /* ← 这里才是箭头颜色 */
}用 background-color + transform 画箭头时颜色在哪设
有些方案用小方块旋转 45° 模拟箭头，这时颜色由 background-color 控制，但要注意定位偏移和旋转中心。
- 箭头元素本身必须有明确宽高，比如
width: 8px; height: 8px; -
background-color直接设为你想要的颜色，例如background-color: #ef4444 - 旋转后位置容易偏，要用
transform-origin对齐，常见是transform-origin: 0 0配合translate()微调 - 别忘了父容器
overflow: visible，否则旋转后被裁剪
.tooltip::after {
content: "";
position: absolute;
top: -4px;
left: 12px;
width: 8px;
height: 8px;
background-color: #ef4444;
transform: rotate(45deg);
transform-origin: 0 0;
}React/Vue 组件库里的 Tooltip 怎么覆盖箭头样式
像 Ant Design、Element Plus、Radix UI 这类库，箭头是内建结构，class 名固定但可能带哈希或动态前缀。靠 specificity 强压不如找对钩子。
立即学习“前端免费学习笔记（深入）”；
- 先用浏览器 DevTools 定位到具体伪元素，看它挂在哪一层 DOM 上（常是
.ant-tooltip-arrow或[data-radix-popper-content-wrapper]后的::before） - 用属性选择器或 :is() 提高匹配确定性，例如
[data-popper-placement="top"] .tooltip-arrow::before - 加
!important很容易，但更稳的是在组件作用域 CSS 里提升权重，比如用& .tooltip-arrow::before（如果支持嵌套语法） - 注意 SSR 场景下伪元素可能初始不可见，样式需在
:hover或[data-state="delayed-open"]下才生效
真正麻烦的不是怎么写 CSS，而是箭头 DOM 节点可能不在你写的 tooltip 元素内部——它被 portal 到 下了，所以父级样式不会穿透过去，必须全局作用或用 :has()（兼容性有限）兜底。
