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

Question

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

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

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

Answer 1

您可以通过使用CSS做到这一点.popover,.popover-title和.popover-content类.

.popover-title{
    background: #ffff99;
}

Answer 2

正如其他人所指出的那样,改变酥料饼的颜色的办法是改变的CSS .popover和.popover.right .arrow:after.但由于我们希望动态发生这种情况,我们会这样做:

$('.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.然后我们简单地添加类,以便:after可以在没有JS的情况下自然地应用选择器.

JSFIDDLE DEMO.