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;"> <li>旧版 Bootstrap（ <h3>用自定义 class 覆盖（兼容所有版本）</h3> <p>给 popover 添加自定义 class（如 <code>my-popover），再通过更具体的 CSS 规则覆盖：
  

  VPS Bootstrap

  从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

  下载

  .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 规则覆盖
  实际改颜色时，最容易忽略的是箭头（arrow）的颜色——它由 .popover-arrow::before 的 background-color 控制，且默认继承 .popover 背景。如果背景色变了但箭头还是白的，就得单独写一条规则： .my-popover .popover-arrow::before { background-color: #3182ce; }