直接改 .tooltip-inner 无效，因 Bootstrap 5+ 的 tooltip 由 Popper 动态插入 底部，脱离原 HTML 结构，导致样式不匹配；CSS 变量覆盖（--bs-tooltip-bg/--bs-tooltip-color/--bs-tooltip-arrow-color）最稳妥，需在 Bootstrap CSS 后加载；单个 tooltip 定制须用 template 注入专属 class 并精准写选择器。
为什么直接改 .tooltip-inner 无效
因为 bootstrap 5+ 的 tooltip 元素由 popper 动态插入到 底部，不在你写的 html 结构里。你写的 .tooltip-inner { background: red; } 样式可能根本没匹配上真实节点——它被挂载在 body 下，而你的 css 作用域或选择器权重不够，或者加载顺序在 bootstrap css 之前。
- 浏览器 DevTools 里 hover 查看 tooltip 元素，会发现它确实不在触发元素内部，而在
body最后 - Bootstrap 自带大量带
!important的规则，普通类选择器会被压制 - 即使加了
!important，也可能因选择器精度不足（比如只写.tooltip-inner）而失效
用 CSS 变量覆盖最稳（Bootstrap 5.2+）
官方支持的定制入口是 CSS 变量，改一个就能联动背景、文字、箭头三者，不用碰 DOM 或强依赖选择器权重。
- 必须在 Bootstrap CSS 文件之后加载自定义样式，否则变量会被重置
- 推荐写在
<style></style>块末尾或独立 CSS 文件底部，作用域用body比: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-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 规则时三个高频翻车点
如果项目还在用老版本 Bootstrap（
-
.tooltip-inner加了padding或font-size后，小三角位置偏移 → 必须同步调.tooltip-arrow的top/bottom值，或干脆用clip-path重绘箭头 - 只靠
.tooltip-inner { background: red !important; }白忙活 → 因为 Bootstrap 的.tooltip容器没有绑定到触发元素上的 class，你的选择器打不中真实 DOM - 用
[data-bs-toggle="tooltip"] .tooltip-inner这类前缀提升精度，但要注意：它只能匹配已初始化的 tooltip 实例，动态生成的需确保 JS 初始化完成后再注入样式
真正容易被忽略的是箭头颜色和容器圆角的协同问题：改了 border-radius 却没重绘箭头，三角形就会“悬空”在圆角外；改了背景色却忘了 --bs-tooltip-arrow-color，视觉就断层。这些细节不显眼，但上线后第一眼就能被用户感知到。
