Tooltip 默认样式改不动是因为其DOM由Popper.js动态插入body底部，直接写.tooltip{}无效；应将自定义样式置于Bootstrap CSS之后，用更具体选择器或template选项添加自定义class。
Tooltip 默认样式为什么改不动？
Bootstrap 的 tooltip 是通过 Popper.js 动态插入 DOM 的，生成的元素不在你写的 HTML 里，而是在 body 底层。直接写 .tooltip { color: red; } 大概率无效——因为没加 !important，更关键的是没覆盖到真实渲染节点的 specificity。
常见错误现象：
- 在 CSS 文件里改了
.tooltip-inner，但鼠标悬停后内容还是默认灰底白字 - 用了
!important也不生效 → 很可能是选择器权重不够，或样式加载顺序被 Bootstrap 官方 CSS 覆盖
实操建议：
- 把自定义样式放到 Bootstrap CSS 之后加载
- 用更具体的选择器，比如
body .tooltip .tooltip-inner或.my-tooltip .tooltip-inner（配合template选项） - 避免只靠类名，优先加自定义 class 到 tooltip 实例上
如何用 template 选项注入自定义 classtemplate 是最可控的方式，它让你完全掌控 tooltip 的 DOM 结构，也绕开了全局样式污染问题。
使用场景：
- 需要为不同按钮配不同颜色/圆角/阴影的 tooltip
- 要加图标、多行排版、或响应式字号
参数差异：
默认 template 是：'<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'
你只需把 class="tooltip" 换成 class="tooltip my-tooltip-primary"，再写对应 CSS 即可
示例：
const tooltip = new bootstrap.Tooltip(element, {
template: '<div class="tooltip my-tooltip-success" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'
});注意：修改 template 后，所有依赖默认 class 名的 JS 行为（如箭头定位）仍正常，只要保留 .tooltip-arrow 和 .tooltip-inner 就行。
修改 tooltip-inner 和 tooltip-arrow 的常见坑.tooltip-inner 控制文字容器，.tooltip-arrow 控制小三角。它们的尺寸、位置由 Popper 计算，但样式一改就容易错位。
容易踩的坑：
- 给
.tooltip-inner加padding后文字上下偏移 → 需同步调整.tooltip-arrow的top/bottom偏移 - 改
border-radius太大导致箭头“悬空” → 箭头本身是纯色 div，不随圆角裁切，得用clip-path或伪元素重写 - 在 dark mode 下忘了改
.tooltip-arrow颜色 → 它默认继承.tooltip-inner背景色，但有时需单独设
实操建议：
- 优先用
background-color+color+font-size这类安全属性 - 调整圆角时，
border-radius: 6px是较稳妥的上限 - 箭头颜色统一用
background-color: currentColor，然后靠父级color控制
data-bs-* 属性和 JS 初始化哪个更合适？
用 data-bs-toggle="tooltip" 简单，但没法传 template 或动态 class；JS 初始化虽然多写几行，却能精准控制每个 tooltip。
性能 / 兼容性影响：
-
data-bs-*是批量初始化，适合全站统一风格，但无法差异化 - JS 初始化支持
container选项（把 tooltip 插入指定父元素），避免body里堆太多浮层，对复杂页面更友好
实操建议：
- 如果项目里 tooltip 样式只有 1–2 种，用
data-bs-template属性即可：data-bs-template='<div class="tooltip my-tip">...</div>' - 如果要根据数据动态变色（比如状态红/黄/绿），必须用 JS 创建实例，并在
show.bs.tooltip事件里 patch class - 不要用
data-bs-custom-class期望自动加 class —— Bootstrap 5.3+ 才支持，旧版本无效
有些细节藏得深：比如 boundary 影响箭头是否被裁掉，fallbackPlacements 决定空间不足时往哪翻转——这些不改样式，但改了会让 tooltip 看起来“突然跳位置”，容易误以为是样式 bug。
