您将以.popover元素为目标，而不是#popOverBox
EXAMPLE HERE

.popover {
    background: tomato;
}

字符串
要更改箭头（伪元素）的背景，可以用途：

.popover.bottom .arrow:after {
    border-bottom-color: tomato;
}

型

在Bootstrap-4中更改弹出框背景和文本颜色当您使用sass-bootstrap-4时，您可以通过更改一些变量值轻松完成。
这些是_variables.scss文件中的变量：

$popover-inner-padding: 1px !default;
$popover-bg: #fff !default;
$popover-max-width: 276px !default;
$popover-border-width: $border-width !default;
$popover-border-color: rgba(0, 0, 0, .2) !default;
$popover-box-shadow: 0 5px 10px rgba(0, 0, 0, .2) !default;

$popover-title-bg: darken($popover-bg, 3%) !default;
$popover-title-padding-x: 14px !default;
$popover-title-padding-y: 8px !default;

$popover-content-padding-x: 14px !default;
$popover-content-padding-y: 9px !default;

$popover-arrow-width: 10px !default;
$popover-arrow-color: $popover-bg !default;

$popover-arrow-outer-width: ($popover-arrow-width + 1px) !default;
$popover-arrow-outer-color: fade-in($popover-border-color, .05) !default;

字符串
我使用$brand-info变量将它们更改为浅蓝色：

注意：最好将这些变量复制到您自己的自定义.scss文件中，然后更改它们。

$popover-inner-padding: 1px !default;
$popover-bg: #fff !default;
$popover-max-width: 276px !default;
$popover-border-width: $border-width !default;
$popover-border-color: $brand-info;
$popover-box-shadow: 0 5px 10px rgba(0, 0, 0, .2) !default;

$popover-title-bg: $brand-info;
$popover-title-padding-x: 14px !default;
$popover-title-padding-y: 8px !default;

$popover-content-padding-x: 14px !default;
$popover-content-padding-y: 9px !default;

$popover-arrow-width: 10px !default;
$popover-arrow-color: $popover-bg !default;

$popover-arrow-outer-width: ($popover-arrow-width + 1px) !default;
$popover-arrow-outer-color:$brand-info;

型

**修改变量后输出：**x1c 0d1x

.popover {background-color: tomato;}
.popover.bottom .arrow::after {border-bottom-color: tomato; }
.popover-content {background-color: tomato;}

字符串

时间已经过去了，我想用LESS报告我的个人解决方案（确实，符合我的需求，但我认为对这里的一些人来说可能很有用）。向class="popover"添加一个类，如class="popover popover-warning"，并在less中执行以下操作：

.popover-warning {
  background-color: #f0ad4e !important;
  & .arrow, .arrow:after {
    border-left-color: #f0ad4e !important;
    border-left-color: rgba(0, 0, 0, 0.25);
  }
  & .popover-content, .popover-title {
    background-color: #f0ad4e !important;
  }
}

字符串
希望这对你有帮助。

请注意，如果您使用的是less或sass文件，您还可以执行以下操作：

@popover-bg: tomato;

字符串
这样，就不用担心箭头在哪一边了。

您可以更改弹出框的默认模板：

//Setup popover
node_el.popover(
    { title: 'Error',
        content: err_msg,
        trigger: 'focus',

        placement: 'top',
        template: '<div class="popover err" role="tooltip"><div class="arrow"></div><h3 class="popover-header text-danger"></h3><div class="popover-body text-danger"></div></div>'
    });

node_el.popover('show');

字符串
CSS类'err'和'text-danger'在上面的示例中添加。背景颜色的CSS类也可以添加。

自Bootstrap 5.2.0起，弹出框可以使用CSS变量进行自定义。有关另一个示例，请参见文档中的自定义弹出框部分。

new bootstrap.Popover(document.querySelector('[data-bs-toggle=popover]'));

个字符