更改bootstrap popover背景颜色

Question

我正在尝试在bootstrap popover上更改CSS。我想改变整个弹出窗口背景，而不仅仅是文本。

有什么建议吗？

http://bootply.com/110002

$(document).ready(function() {
  $("[rel='android']").popover({
    html: 'true', 
    content: '<div id="popOverBox">Coming March 2014</div>'
   });
});

CSS

 #popOverBox {
     background: tomato;
     font-family: serif;
 }

Answer 1

您将定位.popover元素，而不是#popOverBox

EXAMPLE HERE

.popover {
    background: tomato;
}

要更改箭头的背景（伪元素），您可以使用：

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

Answer 2

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

Answer 3

更改Bootstrap-4中的popover背景和文字颜色

当你使用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;

更改变量后的输出：

Answer 4

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

@popover-bg: tomato;

这样，无需担心箭头在哪一侧。

Answer 5

无论如何，时间过去我想在LESS中报告我的个人解决方案（事实上，符合我的需求，但我认为这对一些人有用）。 将一个类添加到class="popover"，就像class="popover popover-warning"一样，并且少做这样的事情：

.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;
  }
}

希望这有帮助。

Answer 6

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

//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 类...