直接改 .tooltip-inner 样式不生效是因为 bootstrap 5+ 的 tooltip 由 popper 动态插入 底部，脱离原始 dom，导致选择器无法命中；且圆角过大时 .tooltip-arrow 会错位。
直接改 .tooltip-inner 为什么背景色和圆角都不生效
因为 Bootstrap 5+ 的 tooltip 元素由 Popper 动态插入到 底部，完全脱离原始 DOM 结构。你写的 .tooltip-inner { background: red; border-radius: 8px; } 样式作用域根本没覆盖到真实节点——它既不在触发元素内部，也不在你写的 CSS 选择器能自然捕获的上下文中。
更麻烦的是：.tooltip-inner 的 border-radius 还受 Popper 定位逻辑影响：圆角值过大时，.tooltip-arrow（小三角）会“悬空”或错位，视觉上像断开了。
- 浏览器 DevTools 里 hover 查看 tooltip 节点，确认它确实在
最末尾 - 检查 computed styles，如果
border-radius显示为0px或未生效，大概率是选择器没命中或被 Bootstrap 原生规则压制 - 别用
!important硬盖——它可能暂时起效，但会锁死后续主题切换或响应式调整
全局改背景色和圆角：用 CSS 变量最稳
Bootstrap 5.2+ 官方支持通过 CSS 变量统一控制 tooltip 外观，改一个变量，背景、文字、箭头三者自动联动，且不依赖选择器权重。
必须确保自定义样式在 Bootstrap CSS 文件之后加载（检查 HTML 中 <link> 顺序），作用域推荐用 body 而非 :root，避免 Shadow DOM 或 CSS-in-JS 场景下透传失败。
-
body { --bs-tooltip-bg: #28a745; }→ 控制背景色 -
body { --bs-tooltip-arrow-color: #28a745; }→ 必须显式设置，否则箭头仍是默认黑灰，视觉割裂 -
body { --bs-tooltip-border-radius: 12px; }→ Bootstrap 并未内置该变量，需手动注入并配合 CSS 覆盖
圆角不能只靠变量，得补一行 CSS：
body .tooltip .tooltip-inner {
border-radius: var(--bs-tooltip-border-radius, 6px);
}
注意：--bs-tooltip-border-radius 是自定义变量名，不是 Bootstrap 原生变量，但命名清晰、便于维护。
单个 tooltip 精准控制圆角和背景色：用 template 注入 class
当你需要某个按钮配绿色成功提示、另一个配红色警告，又不想影响全局，template 是唯一可靠路径——它让你把自定义 class 直接塞进 tooltip 容器，CSS 才能精准命中。
默认 template 是：
'<div class="tooltip" role="tooltip"> <div class="tooltip-arrow"></div> <div class="tooltip-inner"></div> </div>'
改成带 class 的版本：
const tooltip = new bootstrap.Tooltip(element, {
template: '<div class="tooltip tooltip-success" role="tooltip">
<div class="tooltip-arrow"></div>
<div class="tooltip-inner"></div>
</div>'
});
- CSS 必须写成：
.tooltip-success .tooltip-inner { background-color: #28a745; border-radius: 12px; } - 务必保留
.tooltip-arrow和.tooltip-inner这两个类名，否则定位或内容渲染异常 - 圆角设大后，箭头可能偏移——需同步微调
.tooltip-success .tooltip-arrow的top/bottom值（通常 ±2px 就够）
圆角改完箭头“飘”了？这是最容易被忽略的细节
圆角本身不会自动裁切 .tooltip-arrow，那个小三角是独立的 <div>，靠 <code>transform 和 border 模拟出来的。一旦 .tooltip-inner 的 border-radius 超过 6px，箭头就容易视觉脱节。
解决方法不是删圆角，而是对齐：
- 给
.tooltip-arrow加margin-top: -2px（上方向 tooltip）或margin-bottom: -2px（下方向 tooltip）微调位置 - 如果圆角很大（如 16px），建议用
clip-path包裹整个 tooltip 容器：.tooltip-success { clip-path: rounded(16px); }（注意兼容性） - 深色模式下，别忘了检查
.tooltip-arrow颜色是否仍可读——它不继承--bs-tooltip-bg，得单独设background-color
动圆角，至少得查三处：容器 border-radius、箭头位置偏移、深色模式下的箭头可见性。缺一不可。
