Tooltip颜色不生效需优先检查CSS权重和选择器精度；推荐用CSS变量（如--bs-tooltip-bg）覆盖，或通过template自定义结构并同步更新箭头样式。
Tooltip颜色不生效？优先检查CSS权重和选择器精度
Bootstrap的tooltip默认样式由大量带!important的规则控制，直接写.tooltip-inner { background: red; }往往无效。根本原因是Bootstrap 5+使用data属性生成tooltip元素，且其.tooltip-inner被包裹在动态插入的.tooltip容器里，而该容器没有class绑定到触发元素上——你改的CSS可能根本没命中。
- 确保你的自定义CSS在Bootstrap CSS之后加载（不是JS之后）
- 必须用足够精确的选择器，比如加
[data-bs-toggle="tooltip"]前缀或提高层级：.my-tooltip .tooltip-inner - 避免依赖
!important硬覆盖，它会让后续维护变脆弱；优先用更具体的选择器
用CSS变量覆盖最稳妥（Bootstrap 5.2+）
Bootstrap 5.2起为tooltip内置了CSS变量，这是官方推荐、无侵入、可主题化的方案。只要在:root或tooltip父容器上设置对应变量即可，无需动DOM结构或强耦合class名。
- 设置
--bs-tooltip-bg控制背景色（默认是#000） - 设置
--bs-tooltip-color控制文字色（默认是#fff） - 变量作用域支持局部覆盖：比如只给某个按钮的tooltip变蓝，就写
.btn-primary .tooltip-inner { --bs-tooltip-bg: #0d6efd; }
:root {
--bs-tooltip-bg: #dc3545;
--bs-tooltip-color: #fff;
}手动初始化时传入template参数改结构
如果需要彻底换掉默认HTML结构（比如加icon、改边框、套阴影），不能只靠CSS——得用JS初始化时替换template字符串。这个参数允许你定义整个tooltip容器的HTML，包括.tooltip外层和.tooltip-inner内部。
- 默认template是：
'<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' - 想加自定义class？改成：
'<div class="tooltip tooltip-danger" role="tooltip">...</div>' - 注意：改了template后，所有CSS选择器都要跟着更新，比如现在得写
.tooltip-danger .tooltip-inner
伪元素箭头颜色同步改不了？用::before单独调
tooltip的三角箭头是用.tooltip-arrow的::before伪元素画的，它默认继承--bs-tooltip-bg，但如果你用template自定义了结构，或用了老版本Bootstrap，箭头可能还是黑的。
- 箭头颜色实际由
.tooltip-arrow::before的background-color决定 - 它不会自动响应
--bs-tooltip-bg，必须显式覆盖：.tooltip-danger .tooltip-arrow::before { background-color: #dc3545; } - 别漏掉
dark模式下可能需要额外媒体查询，否则深色背景里箭头会消失
改tooltip颜色看着简单，真正卡住人的永远是那层看不见的DOM插入时机、CSS作用域和伪元素继承链。动一个地方，至少得查三处是否连上了。
