直接修改 .tooltip-inner 的 font-size 和 line-height 无效，因 Bootstrap Tooltip 由 Popper 动态插入 底部，易被默认样式覆盖；应确保自定义 CSS 在 bootstrap.min.css 后加载，使用更具体选择器（如 body .tooltip .tooltip-inner）或通过 template 选项注入自定义 class（如 .my-tooltip-lg .tooltip-inner），并同步调整 .tooltip-arrow 的 margin-top 以修正箭头偏移，同时注意 max-width 与 white-space 对布局的影响。
直接改 .tooltip-inner 的 font-size 和 line-height 无效？
因为 bootstrap 的 tooltip dom 是 popper.js 动态插入 底部的，你写的 .tooltip-inner { font-size: 14px; } 很可能被 bootstrap 自带 css 覆盖——尤其当它加载在你自定义样式之前，或选择器权重不够时。
常见错误现象：
– 写了 .tooltip-inner { font-size: 16px; line-height: 1.6; }，但悬停后还是默认大小
– 加了 !important 也不起作用 → 很可能是样式表加载顺序错位，或没覆盖到真实渲染节点（比如用了 .tooltip 前缀但实际 class 在 body 下）
- 确保你的自定义 CSS 文件在
bootstrap.min.css之后加载 - 用更具体的选择器，例如
body .tooltip .tooltip-inner或.my-tooltip .tooltip-inner - 避免只靠类名，优先配合
template选项注入自定义 class（见下一条）
用 template 选项加自定义 class 最可靠
这是控制字体、行高、宽度等样式的首选方式：它让你完全掌控 Tooltip 的 HTML 结构，绕开全局样式污染和权重问题，且不影响 Popper 定位逻辑。
使用场景：
– 需要为不同按钮配不同字号/行高（如操作按钮用小号字，说明按钮用大号+多行）
– 要适配暗色模式或响应式字号（比如移动端缩小 font-size）
- 保留
.tooltip-arrow和.tooltip-inner这两个关键 class，否则定位会失效 - 把自定义 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>'
});
line-height 改了但文字上下偏移？同步调 .tooltip-arrow
.tooltip-inner 的 padding 和 line-height 一变，小三角（.tooltip-arrow）的位置就容易错位——因为它靠固定 top/bottom 值 + margin-top/margin-bottom 居中，不是自动对齐文本基线。
容易踩的坑：
– 给 .tooltip-inner 加了 padding: 12px 16px 后，文字视觉上“上浮”，箭头却还指在旧位置
– 把 line-height 设成 2，结果箭头卡在文字中间或悬空
- 若
.tooltip-inner增加了 vertical padding，建议同步调整.tooltip-arrow的margin-top（top/bottom 方向） - 例如：原默认
padding: 3px 8px对应margin-top: -5px；现用padding: 10px 16px，可试margin-top: -8px - 不推荐直接删掉箭头（
opacity: 0），除非你用伪元素重写，否则会影响无障碍支持
字体大小设太大会撑破最大宽度？注意 max-width 和 white-space
Bootstrap 默认给 .tooltip-inner 设了 max-width: 200px（v5）或 200px（v4），字体一放大，内容就自动换行+拉高，容易出现又高又窄的难看气泡。
性能 / 兼容性影响：
– 单纯增大 font-size 不影响 JS 行为，但若同时改 max-width 到 400px，Popper 可能因容器变宽而重新计算 placement（比如从 top 掉到 bottom）
– white-space: normal 是默认值，但若你手动写了 white-space: nowrap，再加大字号就会溢出
- 优先用
max-width: 320px配合font-size: 15px，比硬塞400px + 18px更稳 - 长文本需换行？必须加
data-html="true"，否则<br>和<p></p>不解析 - 移动端要考虑
font-size: clamp(14px, 4vw, 16px)，但注意 Popper 不感知 CSS clamp，placement 计算仍基于初始渲染尺寸
真正麻烦的不是改几个属性，而是改完之后要不要测所有 placement（top/right/bottom/left）下的箭头对齐、是否被 viewport 截断、暗色模式下箭头颜色是否还协调——这些细节没人替你兜底。
