直接改 .tooltip-inner 失效是因为 bootstrap 5+ 将 tooltip 动态插入 底部，脱离原 dom 结构，且其样式被高权重规则覆盖；推荐用 css 变量 --bs-tooltip-bg、--bs-tooltip-color 和 --bs-tooltip-arrow-color 统一控制，并确保在 bootstrap css 后加载。
直接改 .tooltip-inner 为什么经常失效
因为 Bootstrap 5+ 的 tooltip 元素由 Popper 动态插入到 底部，脱离原始 DOM 结构。你写的 .tooltip-inner { background-color: red; } 样式很可能根本没匹配上真实节点——它不在触发元素内部，而是在页面最底部。浏览器 DevTools 里 hover 查看 tooltip，会发现它确实挂载在 末尾。
- Bootstrap 自带大量带
!important的规则，普通类选择器权重不够 - 即使加了
!important，也可能因选择器太泛（比如只写.tooltip-inner）被更精确的原生规则压制 - 你的 CSS 文件如果加载在 Bootstrap 主 CSS 之前，变量和样式都会被重置
用 --bs-tooltip-bg 变量才是官方推荐路径
Bootstrap 5.2+ 原生支持 CSS 变量控制 tooltip 配色，这是唯一能联动背景、文字、箭头三者且无需 !important 的方式。改一个变量，.tooltip-inner 和 .tooltip-arrow 自动响应。
- 必须在 Bootstrap CSS 文件之后加载自定义样式，否则变量会被覆盖
- 作用域推荐用
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 的：
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这两个类名，否则定位逻辑会出错
别踩这些坑：透明度、深色模式、箭头同步
真正生效的关键不在 alpha 值大小，而在于你是否同时控制了 .tooltip-inner 和它的箭头伪元素；变量方式虽干净，但加载顺序错一拍，整个 tooltip 就退回纯黑。
-
opacity不能调背景透明度——它会让文字和箭头一起变淡，真正起效的是把background-color改成rgba()，比如rgba(0, 0, 0, 0.7) - 深色模式下，如果项目用了主题切换，光靠
background-color覆盖可能失效，优先重定义--bs-tooltip-bg变量 - 箭头颜色不会自动随
--bs-tooltip-bg变化，必须显式设置--bs-tooltip-arrow-color，否则边缘发灰或不可见
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
