直接改 .tooltip-inner 的 font-size 和 line-height 无效，因 Bootstrap Tooltip 由 Popper.js 动态插入 底部，易被覆盖；应确保自定义 CSS 在 bootstrap.min.css 后加载，使用更具体选择器（如 body .tooltip .tooltip-inner）或通过 template 选项注入自定义 class（如 .my-tooltip-lg .tooltip-inner），并同步调整 .tooltip-arrow 的 margin-top 或 transform 以修正箭头偏移。
直接改 .tooltip-inner 的 font-size 和 line-height 为什么没反应
因为 Bootstrap Tooltip 的 DOM 是 Popper.js 动态插入到 底部的，你写的 .tooltip-inner { font-size: 16px; } 很可能被 Bootstrap 自带样式覆盖——尤其当你的 CSS 在 bootstrap.min.css 之前加载，或选择器权重不够时。即使加了 !important，也可能因渲染节点不在当前上下文（比如写在组件 scoped style 里）而失效。
用 template 选项注入自定义 class 最可靠
这是绕过样式覆盖、精准控制字体和行高的首选方式。它让你完全掌控结构，同时保留 Popper 定位所需的关键 class。
- 必须保留
.tooltip和.tooltip-inner，否则定位逻辑会中断 - 把自定义 class 加在外层容器上，例如
class="tooltip my-tooltip-lg" - 对应写 CSS：
.my-tooltip-lg .tooltip-inner { font-size: 16px; line-height: 1.5; padding: 0.5rem 0.75rem; } - 示例初始化：
const tooltip = new bootstrap.Tooltip(element, {
template: '<div class="tooltip my-tooltip-lg" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'
});
改了 line-height 或 padding 后小三角偏移怎么办
.tooltip-arrow 的位置是靠固定 top/bottom 值 + margin-top/margin-bottom 计算的，一旦 .tooltip-inner 高度变化，箭头就会错位。
- 如果
line-height从 1.2 改成 1.6，建议同步调整.tooltip-arrow的margin-top（对bs-tooltip-top）或margin-bottom（对bs-tooltip-bottom） - 更稳妥的做法：统一用
transform: translateY()微调，比如.my-tooltip-lg .tooltip-arrow { margin-top: 0; transform: translateY(-4px); } - 别只调
padding，max-width和white-space也要配合：推荐white-space: normal; word-break: break-word;，避免长文本撑破布局
移动端长按场景下字体样式怎么保持一致
移动端触发方式改为 trigger: 'manual' 后，Tooltip 完全脱离自动生命周期，但样式规则依然生效——前提是你的自定义 class 已通过 template 注入，且 CSS 文件加载顺序正确。
- 确保自定义 CSS 在
bootstrap.min.css之后加载 - 避免用
em或rem做绝对字号控制，改用px或响应式clamp()，例如font-size: clamp(12px, 0.875rem, 14px); - 如果用了暗色模式，记得单独定义
.my-tooltip-lg.dark-mode .tooltip-inner，因为.tooltip-arrow默认继承背景色，但有时需显式设border-color
.tooltip-arrow 的微调；哪怕只动了 padding: 0.25rem，也得看一眼箭头是否还正对文字中心。 
