应使用css变量覆盖bootstrap 5.2+ tooltip字体色、背景色和箭头色，设置body下的--bs-tooltip-bg、--bs-tooltip-color和--bs-tooltip-arrow-color三变量；改字体大小等需用template注入自定义class并精准写选择器。
直接改 .tooltip-inner 的 font-size、color 或 font-family 很可能无效——不是你写错了，是 Bootstrap 5+ 的 tooltip 元素由 Popper 动态插入 底部，脱离原始 DOM 结构，你的样式根本没匹配上真实节点。
用 CSS 变量覆盖字体色和背景色（Bootstrap 5.2+）
这是最稳、最轻量的方式，官方支持，不依赖选择器权重，也不用 !important。但必须注意三点：
- 变量必须在 Bootstrap CSS 文件之后加载（检查
<link>顺序） - 作用域推荐用
body而非:root，因为 tooltip 真实挂载在下，:root在 Shadow DOM 或某些 CSS-in-JS 场景下可能不透传 - 只设
--bs-tooltip-color不够——它只控制文字色；--bs-tooltip-bg控制背景；--bs-tooltip-arrow-color必须同步设，否则箭头还是默认黑灰，视觉割裂
示例：
body {
--bs-tooltip-bg: #2c3e50;
--bs-tooltip-color: #ecf0f1;
--bs-tooltip-arrow-color: #2c3e50;
}
改字体大小、行高、字重需配合 template 选项
单纯改 .tooltip-inner 的 font-size 和 line-height 容易被 Bootstrap 原生规则压制，尤其当样式加载顺序不对或选择器精度不够时。真正可靠的做法是用 template 注入自定义 class，再针对性写样式：
- 保留
.tooltip-arrow和.tooltip-inner这两个关键 class，否则 Popper 定位会失效 - 把自定义 class 加在外层容器上，比如
class="tooltip tooltip-lg" - CSS 必须写成
.tooltip-lg .tooltip-inner，而不是.tooltip-lg或单独的.tooltip-inner -
line-height改了之后，.tooltip-arrow的垂直位置容易偏移，需同步检查其margin-top或top值是否仍合理
JS 初始化示例：
const tooltip = new bootstrap.Tooltip(element, {
template: '<div class="tooltip tooltip-lg" role="tooltip">' +
' <div class="tooltip-arrow"></div>' +
' <div class="tooltip-inner"></div>' +
'</div>'
});
对应 CSS：
.tooltip-lg .tooltip-inner {
font-size: 15px;
line-height: 1.4;
font-weight: 500;
font-family: "Segoe UI", system-ui, sans-serif;
}
为什么加 !important 有时才生效？
这不是“应该这么做”，而是你的样式被 Bootstrap 原生规则压住了——它大量使用 !important，且选择器精度高（如 .tooltip.show .tooltip-inner）。硬加 !important 是临时解法，后续主题切换或升级 Bootstrap 版本时极易踩坑。
- 真正该做的是：确保自定义 CSS 在 Bootstrap CSS 之后加载
- 提高选择器精度，例如用
body .tooltip .tooltip-inner或[data-bs-toggle="tooltip"] + .tooltip .tooltip-inner - 避免写
.tooltip-inner { color: red !important; }这种全局强覆盖，它会锁死所有 tooltip 的文字逻辑
最容易被忽略的细节
改字体样式看着简单，实际卡点永远在三处：一是 DOM 插入时机（Popper 挂到 底部，不在你写的 HTML 里）；二是 CSS 作用域（:root 变量不一定能透传过去）；三是伪元素继承链（.tooltip-arrow::before 默认继承 --bs-tooltip-bg，但某些定制场景下需手动重设 background-color）。动一个地方，至少得查这三处是否连通。
