首选方案是使用css变量--bs-tooltip-bg，因其官方支持、无需!important、联动背景/文字/箭头三者颜色；需在bootstrap css后加载，推荐body{--bs-tooltip-bg:#0d6efd;}并补全--bs-tooltip-arrow-color。
直接改 .tooltip-inner 基本无效，不是你写错了，是 Bootstrap 5 的 tooltip DOM 被 Popper 动态挂到 底部，你写的样式根本没匹配上真实节点。
为什么 --bs-tooltip-bg 是首选方案
CSS 变量是 Bootstrap 5.2+ 官方支持的定制入口，它不依赖选择器权重，也不需要 !important，改一个变量就能联动背景、文字、箭头三者颜色，维护成本最低。
- 变量必须在 Bootstrap CSS 文件 之后 加载，否则会被重置；推荐放在你自己的
<style></style>块末尾或独立 CSS 文件最底部 - 作用域要对：
:root全局生效，但更稳妥的是用body { --bs-tooltip-bg: #0d6efd; }，因为 tooltip 元素实际挂载在下，:root在某些 Shadow DOM 或 CSS-in-JS 场景下可能不透传 - 别只设
--bs-tooltip-bg和--bs-tooltip-color，漏掉--bs-tooltip-arrow-color会导致箭头还是黑的，视觉割裂
用 template 加自定义 class 精准控制单个 tooltip
当你需要为某个按钮配专属主题色（比如红色警告、绿色成功），又不想影响全局，template 是唯一可靠路径——它让你把 class 直接塞进 tooltip 容器，CSS 就能精准命中。
- 默认
template是：'<div class="tooltip" role="tooltip"> <div class="tooltip-arrow"></div> <div class="tooltip-inner"></div> </div>' - 改成带 class 的：
template: '<div class="tooltip tooltip-warning" role="tooltip"> <div class="tooltip-arrow"></div> <div class="tooltip-inner"></div> </div>' - 对应 CSS 必须写成：
.tooltip-warning .tooltip-inner，而不是.tooltip-warning或.tooltip-inner—— 后者照样不生效 - 保留
.tooltip-arrow和.tooltip-inner这两个类名，Popper 的定位逻辑才不会崩
硬写 CSS 规则时最容易翻车的三个点
如果你坚持用传统 CSS 覆盖（比如老项目不能升级 Bootstrap 版本），这几个坑几乎必踩：
-
.tooltip-inner加了padding或font-size后，小三角位置偏移 → 必须同步调.tooltip-arrow的top/bottom值，或者干脆用clip-path重绘箭头 - 只靠
.tooltip-inner { background: red !important; }很可能白忙活 → 因为 Bootstrap 自带样式里大量用了!important，且.tooltip容器没有 class 绑定到触发元素上，你的选择器根本没打中真实 DOM - 用
data-bs-custom-class属性看似方便，但它只给.tooltip容器加 class，不改结构，你要重写全部样式（padding、border-radius、box-shadow），一漏就回退到默认灰底
真正难的不是改颜色，而是让箭头和内容在所有 placement（top/right/bottom/left）下都对齐、颜色一致、不闪跳。变量方案省事，template 方案可控，硬写 CSS 方案……建议只在迫不得已时打开开发者工具，一行行 inspect 真实渲染后的节点再下手。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
