How to change the color of a Bootstrap popover in JavaScript

Question

I have this JS code to bring up a popover:

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

I would like to change the attributes, for example, I would like the color of the popover to be a light yellow. Is there a way I can do this in the JS code itself? Perhaps in the template option?

Answer 1

You can do this with CSS by using the .popover, .popover-title, and .popover-content classes.

.popover-title{
    background: #ffff99;
}

Answer 2

As others have pointed out, the way to change the popover color is to change the CSS of .popover and .popover.right .arrow:after. But since we want this to happen dynamically, we would do:

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

But wait, the second jQuery snippet is not right. You cannot have :after selector because :after is NOT a part of DOM, hence no javascript in this world will be able to catch :after. So I made this CSS.

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

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

And whenever I need to change the color of my popover, I write the following jQuery snippet:

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

The #selector is the element on which you have applied the popover. From that element I search the next .popover. This ensures that we are dealing with the popover attached to the current element only. Then we simply add the class so that the :after selector can be applied naturally without JS.

JSFIDDLE DEMO.