直接改 .tooltip-inner 无效是因为 bootstrap 5+ 的 tooltip 由 popper 动态插入 底部，脱离原始 dom；应优先使用 css 变量 --bs-tooltip-bg、--bs-tooltip-color、--bs-tooltip-arrow-color 全局定制，或通过 template 注入自定义 class 实现单个 tooltip 精准样式控制。
直接改 .tooltip-inner 为什么颜色和字体都不生效
因为 Bootstrap 5+ 的 tooltip 元素由 Popper 动态插入到 底部，完全脱离原始 DOM 结构。你写的 .tooltip-inner { background: #007bff; font-size: 14px; } 样式根本没匹配上真实节点——它既不在触发元素内部，也不在你定义的 CSS 作用域里。浏览器 DevTools 里 hover 查看，会发现该节点确实在 最末尾，且 class 名可能还带了 bs-tooltip-top 这类方向前缀。
全局换色用 CSS 变量最稳：--bs-tooltip-bg、--bs-tooltip-color、--bs-tooltip-arrow-color
这是 Bootstrap 5.2+ 官方支持的唯一无侵入方案，改一个变量自动联动背景、文字、箭头三者，不用 !important，也不怕选择器权重不够。
- 必须确保自定义样式在
bootstrap.min.css之后加载（检查 HTML 中<link>顺序） - 推荐写在
body上，比:root更稳妥：body { --bs-tooltip-bg: #28a745; --bs-tooltip-color: #fff; --bs-tooltip-arrow-color: #28a745; } - 漏掉
--bs-tooltip-arrow-color是常见坑——箭头仍为默认黑灰，视觉割裂 - 字体大小/行高不能靠变量控制，需配合后续方案
单个 tooltip 精准定制：用 template 注入自定义 class
当你需要某个按钮配绿色成功提示、另一个配红色警告提示时，template 是唯一可靠路径。它把自定义 class 直接塞进 tooltip 容器，CSS 才能精准命中。
- 初始化时传入：
new bootstrap.Tooltip(element, { template: '<div class="tooltip tooltip-success" role="tooltip"> <div class="tooltip-arrow"></div> <div class="tooltip-inner"></div> </div>' }); - CSS 必须写成：
.tooltip-success .tooltip-inner { background-color: #28a745; color: #fff; font-weight: 600; font-size: 14px; line-height: 1.4; } - 务必保留
.tooltip-arrow和.tooltip-inner这两个 class，否则 Popper 定位失效 - 如果改了
line-height或padding，箭头位置容易偏移，需同步调整.tooltip-arrow的margin-top或top
字体 + 背景组合生效的关键细节
字体大小、行高、背景色、边框、圆角这些属性互相影响，动一个就得查三处：
-
.tooltip-inner加了padding后文字上下偏移？得调.tooltip-arrow的margin-top补偿 - 设了
border-radius: 0.5rem却发现箭头“悬空”？因为.tooltip-arrow是纯色 div，不随圆角裁切，需额外加clip-path或用伪元素重写 - 深色模式下只改了
--bs-tooltip-bg，但--bs-tooltip-arrow-color没同步？箭头会消失或发虚 - 用
template自定义结构后，所有 CSS 选择器都要更新层级，比如不能再写.tooltip-inner，而必须是.my-tooltip .tooltip-inner
