Popover 默认样式由 .popover、.popover-header 和 .popover-body 三个类控制，Bootstrap 5+ 使用 --bs-popover-bg 等 CSS 变量统一管理，推荐通过 :root 覆盖变量以确保全局生效且避免优先级冲突。
Popover 默认样式由哪些 CSS 类控制
bootstrap 的 popover 提示框结构固定，核心样式集中在 .popover、.popover-header 和 .popover-body 三个类上。背景色默认来自 background-color，边框来自 border，且 bootstrap 5+ 使用 css 变量（如 --bs-popover-bg）统一管理，优先级高于传统类名覆盖。
通过 CSS 变量覆盖最稳妥（Bootstrap 5.2+）
直接修改 CSS 变量能避免 specificity 冲突，且影响所有 popover 实例。需确保样式表在 Bootstrap CSS 之后加载：
:root {
--bs-popover-bg: #4a5568;
--bs-popover-border-color: #2d3748;
--bs-popover-header-bg: #2d3748;
--bs-popover-body-padding-x: 1rem;
}
- 变量名必须严格匹配（如拼错
--bs-popover-bk无效） - 若只改单个 popover，可在其容器上设置：
<div class="popover" style="--bs-popover-bg: #e2e8f0;"> - 旧版 Bootstrap（
用自定义 class 覆盖（兼容所有版本）
给 popover 添加自定义 class（如 my-popover），再通过更具体的 CSS 规则覆盖：
.my-popover .popover {
background-color: #3182ce;
border: 1px solid #2b6cb0;
}
.my-popover .popover-header {
background-color: #2b6cb0;
border-bottom: 1px solid #2c5282;
}
.my-popover .popover-body {
color: #e2e8f0;
}
- 必须加
.my-popover前缀，否则可能被 Bootstrap 的高优先级规则覆盖 - Popover 是 JS 动态插入 DOM 的，class 要加在触发元素上并用
container: '.my-popover'选项指定挂载点 - 边框圆角由
border-radius控制，默认是0.5rem，可一并调整
JS 初始化时传入 template 自定义结构（精细控制）
当需要彻底替换 HTML 结构或添加内联样式时，用 template 选项：
const popover = new bootstrap.Popover(element, {
template: `
<div class="popover my-popover" role="tooltip">
<div class="popover-arrow"></div>
<h3 class="popover-header"></h3>
<div class="popover-body"></div>
</div>
`,
customClass: 'my-popover'
});
-
customClass会加到外层.popover容器上，方便 CSS 定位 - 模板中不能漏掉
.popover-arrow，否则小三角消失 - 若用了
template，CSS 变量可能失效，此时必须靠 class + CSS 规则覆盖
.popover-arrow::before 的 background-color 控制，且默认继承 .popover 背景。如果背景色变了但箭头还是白的，就得单独写一条规则： .my-popover .popover-arrow::before { background-color: #3182ce; } 
