直接改 .tooltip-inner 失效是因为 bootstrap 5+ 的 tooltip 由 popper 动态插入到 底部，脱离原始 dom，且自带 !important 规则压制普通样式；推荐用 css 变量 --bs-tooltip-bg、--bs-tooltip-color 和 --bs-tooltip-arrow-color 覆盖，需在 bootstrap css 后加载并作用于 body；单个 tooltip 换色须通过 template 注入自定义 class 并显式设置箭头颜色。
直接改 .tooltip-inner 为什么经常失效
因为 Bootstrap 5+ 的 tooltip 是由 Popper 动态插入到 底部的，脱离原始 DOM 结构。你写的 .tooltip-inner { background: red; } 样式作用域可能根本没覆盖到那个真实节点——它不在你写的 HTML 里，也不在触发元素内部。浏览器 DevTools 里 hover 查看 tooltip 元素，会发现它确实挂在 最后。再加上 Bootstrap 自带大量带 !important 的规则，普通类选择器很容易被压制。
用 CSS 变量 --bs-tooltip-bg 覆盖最可靠
这是 Bootstrap 5.2+ 官方支持的定制入口，不依赖选择器权重，也不需要 !important，改一个变量就能联动背景、文字、箭头三者颜色。
- 必须在 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 注入 class
当你需要为某个按钮配红色警告、绿色成功等专属主题色，又不想影响全局，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这两个类名，否则样式会断
容易被忽略的细节：箭头颜色不是自动继承的
--bs-tooltip-arrow-color 必须显式设置，它不会自动响应 --bs-tooltip-bg。即使你用了 CSS 变量方案，漏掉这一项，箭头就还是黑灰的——尤其在浅色背景上特别突兀。另外，如果项目用了深色模式（data-bs-theme="dark"），也得单独为暗色环境补一组变量，否则 tooltip 在暗色下可能反白或不可读。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
