应使用css变量覆盖bootstrap 5.2+ tooltip样式，设置body下的--bs-tooltip-bg、--bs-tooltip-color和--bs-tooltip-arrow-color三变量；单个tooltip需用template注入自定义class并配合对应css选择器。
直接改 .tooltip-inner 基本无效，不是你写错了，是 Bootstrap 5+ 的 tooltip 元素由 Popper 动态插入到 底部，脱离原始 DOM 结构，你的样式根本没匹配上真实节点。
用 CSS 变量覆盖最稳（Bootstrap 5.2+）
这是官方支持、无侵入、联动背景/文字/箭头三者的唯一推荐方式。改一个变量，三处自动同步，不用写 !important，也不怕选择器权重不够。
- 必须在 Bootstrap CSS 文件之后加载自定义样式（检查 HTML 中
<link>顺序） - 作用域用
body比:root更稳妥：tooltip 真实挂载在下，:root在 Shadow DOM 或某些 CSS-in-JS 场景下可能不透传 - 只设
--bs-tooltip-bg和--bs-tooltip-color不够——漏掉--bs-tooltip-arrow-color，箭头还是默认黑灰，视觉割裂
示例：
body {
--bs-tooltip-bg: #dc3545;
--bs-tooltip-color: #fff;
--bs-tooltip-arrow-color: #dc3545;
}
单个 Tooltip 精准换色必须用 template
当你需要某个按钮配红色警告、绿色成功等专属主题色，又不想影响全局，template 是唯一可靠路径。它让你把自定义 class 直接注入 tooltip 容器，CSS 才能精准命中。
- 默认
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 class="tooltip-arrow"></div> <div class="tooltip-inner"></div> </div>' - CSS 必须写成：
.tooltip-danger .tooltip-inner，而不是.tooltip-danger或单独的.tooltip-inner - 务必保留
.tooltip-arrow和.tooltip-inner这两个类名，否则定位或内容渲染会出问题
为什么加 !important 有时才生效
不是因为必须用它，而是你的 CSS 被 Bootstrap 原生规则压住了——它大量使用 !important，且选择器精度高（比如 .tooltip.show .tooltip-inner）。硬加 !important 是临时解法，后续维护和主题切换都会踩坑。
- 真正该做的是：确保你的样式文件在 Bootstrap CSS 之后引入
- 提高选择器精度，比如用
body .tooltip .tooltip-inner或配合data-bs-toggle="tooltip"前缀 - 避免写
.tooltip-inner { background: red !important; }这种全局强覆盖，它会锁死所有 tooltip 的背景逻辑
最容易被忽略的是箭头颜色——它不随 --bs-tooltip-bg 自动变化，必须显式设置 --bs-tooltip-arrow-color；另外，如果你用了 template 却忘了同步更新 CSS 选择器层级，样式照样不生效。
