直接修改 .tooltip-arrow 无效，因其颜色由 ::before 伪元素的 border-color 控制；需用 border-color 显式设置箭头色，并匹配背景透明度，注意方向类名、!important 及深色模式适配。
为什么直接改 .tooltip-arrow 没效果
因为 .tooltip-arrow 本身不渲染颜色——它只是个空容器，真正画出箭头的是它的 ::before 伪元素，靠 border-color 实现。写 .tooltip-arrow { color: red; } 或 background-color 完全无效。
.tooltip-arrow::before 的颜色必须用 border-color 设置
箭头本质是用 CSS 三角技巧（单边 border + transparent 其他三边）生成的，所以只认 border-color。默认值是 border-color: #000，和半透背景拼在一起边缘会发灰。
- 必须显式覆盖：
.tooltip-arrow::before { border-color: rgba(0, 0, 0, 0.7) !important; } - alpha 值最好和
.tooltip-inner的background-color一致，否则视觉割裂 - 方向类名要匹配：比如
.tooltip.bs-tooltip-top .tooltip-arrow::before控制顶部箭头，.tooltip.bs-tooltip-right .tooltip-arrow::before控制右侧箭头 - 别漏掉
!important—— Bootstrap 原生规则带!important，不加大概率被压住
深色模式下箭头可能消失，得额外处理
如果项目启用了 data-bs-theme="dark" 或 @media (prefers-color-scheme: dark)，默认的 border-color: #000 在暗背景下会不可见。这时候光靠全局 border-color 覆盖不够。
- 推荐优先用 CSS 变量：
body { --bs-tooltip-arrow-color: rgba(255, 255, 255, 0.8); } - 变量必须在 Bootstrap CSS 之后加载，且作用域设为
body（不是:root），否则在 Shadow DOM 或 CSS-in-JS 场景下不生效 - 检查 DevTools 的 Computed 面板，确认最终
border-color来源是你的变量，而不是回退到#000
用 template 自定义时箭头颜色更易失控
如果你通过 JS 初始化时传了 template 参数（比如加 icon 或换结构），.tooltip-arrow 还在，但它的 ::before 仍依赖原始样式链。此时容易出现：背景色变了，文字色变了，箭头还是黑的。
立即学习“前端免费学习笔记（深入）”；
- 必须同步更新 CSS 规则，例如：
.my-custom-tooltip .tooltip-arrow::before { border-color: #dc3545 !important; } - 别指望
--bs-tooltip-bg自动影响箭头——它只控制.tooltip-inner，箭头颜色需单独设--bs-tooltip-arrow-color或硬写border-color - 初始化后检查真实 DOM：右键 inspect tooltip，确认
.tooltip-arrow::before的 computedborder-color确实是你设的值
