Question

我有这个JS代码来提出一个popover：

$('a').popover({content: 'Popover text', title: 'Popover'});
$('a').popover('show');

我想更改属性，例如，我希望popover的颜色为浅黄色。有没有办法在JS代码本身中做到这一点？也许在模板选项中？

Answer 1

您可以使用.popover，.popover-title和.popover-content类来使用CSS执行此操作。

.popover-title{
    background: #ffff99;
}

Answer 2

正如其他人所指出的，更改popover颜色的方法是更改.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;
}

每当我需要更改popover的颜色时，我会编写以下jQuery代码段：

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

#selector是您应用弹出窗口的元素。从该元素我搜索下一个.popover。这可以确保我们只处理附加到当前元素的popover。然后我们简单地添加类，以便{J} {1}}选择器可以自然地应用而无需JS。

JSFIDDLE DEMO.

Answer 3

尝试使用此代码更改Popover标题栏和完整Popover的背景颜色：

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

Answer 4

javascript：

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

html：

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

如何在JavaScript中更改Bootstrap popover的颜色

4 个答案: