直接改 .tooltip-inner 无效是因为 Bootstrap 5 的 tooltip 由 Popper.js 动态插入 body 底部，且样式易被覆盖；推荐优先使用 CSS 变量 --bs-tooltip-bg 覆盖，或通过 template 选项添加自定义 class 精准控制。
为什么直接改 .tooltip-inner 没效果
因为 Bootstrap 5 的 tooltip 元素由 Popper.js 动态插入到 body 底部，不在你写的 HTML 结构里。你写的 .tooltip-inner { background: red; } 可能被 Bootstrap 自带样式覆盖，或选择器权重不够——尤其当它没加 !important、又没在 Bootstrap CSS 之后加载时，基本无效。
最稳的方案：用 CSS 变量覆盖 --bs-tooltip-bg
Bootstrap 5.2+ 原生支持 CSS 变量，这是官方推荐、无侵入、可局部控制的方式。改了变量，背景、文字、箭头色自动联动，不用手动同步 .tooltip-arrow。
-
:root下全局改：:root { --bs-tooltip-bg: #dc3545; --bs-tooltip-color: #fff; --bs-tooltip-arrow-color: #dc3545; } - 只给某个按钮用：
.btn-danger[data-bs-toggle="tooltip"] + .tooltip .tooltip-inner { --bs-tooltip-bg: #dc3545; }（注意：必须确保该元素渲染后能命中真实 tooltip 节点） - 变量必须在 Bootstrap 的 CSS 文件之后声明，否则会被重置
需要深度定制？用 template 选项加自定义 class
当你要换圆角、加图标、改阴影、或让不同按钮配不同主题色时，template 是唯一可控路径。它让你把 class 直接写进 tooltip 容器，避开全局污染和选择器权重战。
- 默认 template 是：
'<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'
- 改成带自定义 class 的：
template: '<div class="tooltip tooltip-primary" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'
- 再写对应 CSS：
.tooltip-primary .tooltip-inner { background-color: #0d6efd; color: #fff; border-radius: 6px; }（保留.tooltip-arrow和.tooltip-inner类名，定位逻辑才正常）
硬改 CSS 时最容易踩的三个坑
如果你坚持写传统 CSS 规则，这几个点不注意，改了也白改：
立即学习“前端免费学习笔记（深入）”；
-
.tooltip-inner加了padding或font-size后，小三角位置偏移 → 必须同步调.tooltip-arrow的top/bottom值，或改用clip-path重绘箭头 - 只设
--bs-tooltip-bg，忘了--bs-tooltip-arrow-color→ 箭头还是默认黑，跟新背景割裂 - 在 dark mode 下用 JS 切换 theme，但没监听
.tooltip节点的 class 变化 → tooltip 容器已挂载，CSS 变量不会自动重算，得手动触发tooltip.hide().show()或重建实例
