直接改 .tooltip-inner 的 font-size 和 line-height 无效，因为 bootstrap 5 的 tooltip 由 popper 动态插入 底部，脱离原始 dom 上下文，易被 bootstrap 自带样式覆盖；最可靠方式是用 template 注入自定义 class（如 .my-tooltip-lg .tooltip-inner），并同步调整 .tooltip-arrow 的 margin-top，同时配合 white-space: normal 和 word-break: break-word 避免布局异常。
为什么直接改 .tooltip-inner 的 font-size 和 line-height 无效
因为 Bootstrap 5 的 Tooltip 由 Popper 动态插入到 底部，脱离原始 DOM 上下文。你写的 .tooltip-inner { font-size: 16px; } 很可能被 Bootstrap 自带样式覆盖——尤其当你的 CSS 在 bootstrap.min.css 之前加载，或选择器权重不够（比如没带上 body 前缀）。
常见错误现象：
– 加了 !important 还是没变
– 浏览器开发者工具里能看到样式被划掉（strikethrough）
– 悬停后提示框仍用默认的 14px / line-height: 1.5
最可靠的方式：用 template 注入自定义 class
这是唯一能精准控制单个 Tooltip 字体、行高、宽度等样式的做法，绕开全局样式污染和权重问题。
- 保留
.tooltip和.tooltip-inner这两个关键 class，否则 Popper 定位会失效 - 把自定义 class 加在外层容器上，例如
class="tooltip my-tooltip-lg" - 对应写 CSS：
.my-tooltip-lg .tooltip-inner { font-size: 16px; line-height: 1.5; } - 示例初始化代码：
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>' });注意：如果用了
data-bs-html="true"放多行 HTML 内容，line-height会影响换行间距，但不会自动撑开容器高度——得靠white-space: normal和word-break: break-word配合改了
line-height后小三角（.tooltip-arrow）偏移怎么办.tooltip-arrow的位置依赖于.tooltip-inner的尺寸和 padding。一旦你调大line-height或加padding，它的margin-top就容易错位。- 同步调整
.my-tooltip-lg .tooltip-arrow的margin-top（通常减去一半新增的行高差） - 例如：原
line-height: 1.5→ 新line-height: 2，字体 14px 变 16px，内容区整体增高约 8px，则margin-top通常要减少 4px 左右 - 不要删掉
.tooltip-arrow，也不要用clip-path或伪元素重写——它负责定位锚点，破坏后 Tooltip 会悬空或贴边
全局统一改字体大小？优先用 CSS 变量
Bootstrap 5.2+ 支持通过 CSS 变量批量控制 Tooltip 样式，比写一堆
.tooltip-inner规则更干净。必须在
bootstrap.min.css之后加载你的样式，并作用于body（不是:root，因 Tooltip 插入在下）：body { --bs-tooltip-bg: #333; --bs-tooltip-color: #fff; --bs-tooltip-arrow-color: #333; }注意：
--bs-tooltip-arrow-color必须显式设置，它不会随--bs-tooltip-bg自动变化；漏掉它，箭头还是默认灰黑色，视觉割裂。真正容易被忽略的点：改完
font-size或line-height后，max-width值可能让长文本挤成窄列——建议配合white-space: normal和word-break: break-word，而不是硬设固定宽度 - 同步调整
