您可以通过使用.popover、.popover-title和.popover-content类来使用CSS实现这一点。

.popover-title{
    background: #ffff99;
}

字符串

正如其他人所指出的，改变弹出框颜色的方法是改变.popover和.popover.right .arrow:after的CSS。但是，由于我们希望这是动态发生的，我们会这样做：

$('.popover').css('background-color', 'red');
$('.popover.right .arrow:after').css('border-right-color', 'red');

字符串

**但是请等一下，第二个jQuery代码段不对。**你不能有:after选择器，因为:after不是DOM的一部分，因此这个世界上没有JavaScript能够捕获:after。所以我做了这个CSS。

.popover-danger {
    background-color: #d9534f;
    border-color: #d43f3a;
    color: white;
}

.popover-danger.right .arrow:after {
    border-right-color: #d9534f;
}

型
每当我需要更改弹出框的颜色时，我编写以下jQuery代码段：

$('#selector').next('.popover').addClass('popover-danger');

型
#selector是应用了弹出框的元素。从该元素中搜索下一个.popover。这确保我们只处理附加到当前元素的弹出框。然后我们简单地添加类，这样:after选择器就可以在没有JS的情况下自然地应用。
JSFIDDLE DEMO.

尝试以下代码更改弹出框标题栏和完整弹出框的背景颜色：

$('.popover-title').css("background-color", "#9FC53B");
$('.popover').css("background-color", "red");

字符串

简体中文

$('#username').popover({
  title: '',
  content: 'error!'
  });
$('#username').popover('show');
$('.popover').addClass('popover-danger');

字符串
联系我们

<div id="username" class="input-group" data-html="true" data-placement="right">
  <span class="input-group-addon width-100 align-right">Username=</span>
  <input type="text" class="form-control" title="username" placeholder="Enter username..." v-model='username'/>
</div>

型
css：

.popover-danger {
    background-color: red !important;
    border-color: red !important;
    color: white !important;
}

型

自Bootstrap 5.2起，弹出框可以使用CSS变量进行自定义。

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

个字符