我想修改 Bootstrap 弹出框的 CSS 样式。我希望改变整个弹出框的背景色，而不仅仅是文本。
有什么建议吗？
$(document).ready(function() {
$("[rel='android']").popover({
html: 'true',
content: '<div id="popOverBox">Coming March 2014</div>'
});
});
CSS
（层叠样式表） #popOverBox {
background: tomato;
font-family: serif;
}
与 #popOverBox 不同，你应该将焦点放在 .popover 元素上。
.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变量将它们更改为浅蓝色：
注意：最好将这些变量复制到您自己的custom.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;
。这与HTML标签保持一致。.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;
}
}
@popover-bg: tomato;
这样就不用担心箭头在哪一边了。
new bootstrap.Popover(document.querySelector('[data-bs-toggle=popover]'));<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
<style>
.my-popover {
--bs-popover-bg: dodgerblue;
--bs-popover-body-color: #e7fc03;
--bs-popover-header-bg: #fff;
}
</style>
<button class="btn btn-primary"
data-bs-toggle="popover" data-bs-custom-class="my-popover"
data-bs-title="Popover Title"
data-bs-content="This is the popover content.">
Click for Popover
</button>您可以更改弹出窗口的默认模板：
//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');
.tooltip-inner { background-color: #D13127; color: #fff; } .tooltip.top .tooltip-arrow { border-top-color: #D13127; }- MCGRAW