要自定义Bootstrap 5+ tooltip背景色，必须用rgba()值显式覆盖.tooltip-inner并加!important，同步设置对应方向箭头伪元素的border-color为相同rgba值，或优先使用--bs-tooltip-bg和--bs-tooltip-arrow-colorCSS变量全局控制。
直接改 .tooltip-inner 的 background-color 为 rgba() 才生效
Bootstrap 5+ 的 tooltip 元素由 Popper 动态插入到 <body> 底部，脱离原始 DOM 结构，所以写在组件内部的 .tooltip-inner { background-color: red; } 很可能根本没匹配上真实节点。真正起效的是显式覆盖 .tooltip-inner 的 background-color，且必须用 rgba()（比如 rgba(0, 0, 0, 0.7)），不是 opacity——后者会让文字、箭头一起变淡，背景“透明”只是错觉。
必须加 !important：Bootstrap 5+ 的 tooltip 样式权重极高，尤其带 .tooltip.show .tooltip-inner 这类高精度选择器，不加 !important 极易被覆盖。
- ✅ 正确：
.tooltip-inner { background-color: rgba(0, 0, 0, 0.7) !important; } - ❌ 错误：
.tooltip { background-color: rgba(0, 0, 0, 0.7); }——.tooltip容器本身无背景色，改了无效 - ⚠️ 注意：
.tooltip-inner自带border-radius和padding，覆盖时别意外重置这些值
箭头颜色必须同步设为 rgba()，否则边缘发灰
Tooltip 箭头是 .tooltip-inner::before 伪元素，靠 border-color 渲染。默认是纯黑 border-color: #000，和半透背景拼在一起，边缘会显得生硬、发灰。
你改了 .tooltip-inner 背景，但漏掉箭头，用户第一眼看到的就是不协调的深色边线。
- 方向需一一对应：上箭头用
.tooltip.bs-tooltip-top .tooltip-inner::before，下箭头用.tooltip.bs-tooltip-bottom .tooltip-inner::before，左右同理 - 每个都要设
border-color: rgba(0, 0, 0, 0.7) !important;，alpha 值最好和背景一致 - 别只写
.tooltip-arrow—— 它不渲染颜色，真起作用的是::before伪元素
深色模式下优先用 --bs-tooltip-bg 变量覆盖
Bootstrap 5.3+ 引入 CSS 变量控制 tooltip，默认 --bs-tooltip-bg: #000（无 alpha）。如果你项目启用了深色模式（data-bs-theme="dark"）或自定义主题，光靠 .tooltip-inner 覆盖可能失效——DevTools 的 Computed 面板里若显示背景来自 var(--bs-tooltip-bg)，那变量法才是唯一解。
变量必须放在 Bootstrap 主 CSS 之后加载，否则会被重置；作用域推荐用 body 而非 :root，更稳妥兼容 Shadow DOM 或 CSS-in-JS 场景。
- ✅ 推荐写法：
body { --bs-tooltip-bg: rgba(0, 0, 0, 0.75); } - ⚠️ 必须同步设
--bs-tooltip-arrow-color：--bs-tooltip-arrow-color: rgba(0, 0, 0, 0.75);，否则箭头仍为纯黑 - ❌ 别只设
--bs-tooltip-bg和--bs-tooltip-color—— 漏掉箭头变量，视觉就割裂
单个 Tooltip 定制要用 template 注入 class
全局改背景色会影响所有 tooltip。如果只想让某个按钮的提示框是红色半透、另一个是蓝色半透，必须用 data-bs-template 注入专属 class，再写精准选择器。
原生 template 是：'<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'；改成带 class 的：'<div class="tooltip tooltip-danger" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'。
- CSS 必须写成：
.tooltip-danger .tooltip-inner { background-color: rgba(220, 53, 69, 0.8) !important; } - 务必保留
.tooltip-arrow和.tooltip-inner这两个类名，否则 Popper 定位或内容渲染会出问题 - 别写成
.tooltip-danger { background-color: ... }—— 容器本身没背景色，无效
.tooltip-inner 和它的箭头伪元素；变量方式虽干净，但加载顺序错一拍，整个 tooltip 就退回纯黑。 
