直接修改 .tooltip-arrow 无效是因为它依赖方位类和单边 border-color 实现三角形，需按方向分别设置 border-bottom-color 等；bootstrap 5.2+ 推荐用 --bs-tooltip-arrow-color 变量统一控制。
为什么直接改 .tooltip-arrow 常常没反应
因为 .tooltip-arrow 不是独立元素，而是靠 CSS 边框（border）模拟的三角形，它的颜色、方向完全依赖于所在 tooltip 的方位类（如 .bs-tooltip-top、.bs-tooltip-bottom）和父容器的 border-color 设置。你写 .tooltip-arrow { border-color: red; } 无效，是因为它本身没有四边都设 border —— 只有某一边有颜色，其余三边透明，靠这个“单边有色”撑出三角效果。
箭头颜色必须按方向分别设置 border-color
不同方位下，起作用的是不同的 border 边：
- 顶部 tooltip（
.bs-tooltip-top .tooltip-arrow）：靠border-bottom-color渲染箭头 - 底部 tooltip（
.bs-tooltip-bottom .tooltip-arrow）：靠border-top-color - 左侧 tooltip（
.bs-tooltip-start .tooltip-arrow）：靠border-right-color - 右侧 tooltip（
.bs-tooltip-end .tooltip-arrow）：靠border-left-color
只统一设 border-color 不行，必须分方向覆盖。示例：
body .bs-tooltip-top .tooltip-arrow {
border-bottom-color: #3182ce;
}
body .bs-tooltip-bottom .tooltip-arrow {
border-top-color: #3182ce;
}
body .bs-tooltip-start .tooltip-arrow {
border-right-color: #3182ce;
}
body .bs-tooltip-end .tooltip-arrow {
border-left-color: #3182ce;
}
用 CSS 变量统一控制（Bootstrap 5.2+ 推荐）
如果你用的是 Bootstrap 5.2 或更高版本，最省事的方式是覆盖变量 --bs-tooltip-arrow-color，它会自动同步到所有方向的箭头：
body {
--bs-tooltip-arrow-color: #dc3545;
}
注意两点：
- 必须在
bootstrap.min.css之后加载该样式 - 仅设这个变量不够 —— 箭头颜色默认不随
--bs-tooltip-bg自动变，所以背景色改了，箭头还可能是灰的，得显式配齐
箭头尺寸和位置偏移怎么调
箭头大小由 .tooltip-arrow 的 width/height 和 border-width 共同决定；位置则靠 top/bottom/left/right + margin 微调。常见问题：
- 加了
border后箭头“发虚”或边缘模糊 → 检查是否用了非整数px值，或transform: scale()导致像素不齐 - 改大
font-size后箭头不在文字正下方 → 需同步调整.tooltip-arrow的margin-top或top偏移量 - 圆角太大时箭头“悬空” →
.tooltip-arrow是纯色块，不被border-radius裁切，强行加大圆角会导致视觉割裂，建议保持border-radius: 0.25rem以内
真正可控的做法，还是用 template 注入自定义 class，再单独写 .my-tooltip .tooltip-arrow 规则 —— 避免全局污染，也方便后续主题切换。
