How to change Bootstrap popup color in JavaScript

Question

I have this JS code to call popover:

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

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

Answer 1

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

 .popover-title{ background: #ffff99; } 

Answer 2

As others have pointed out, a way to change the color of popover is to change the CSS .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 wrong. You cannot have a :after selector because :after NOT part of the DOM, so no javascript in this world can 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'); 

#selector is the element you applied the popover to. From this element I am looking for the following .popover . This ensures that we are dealing with a popover attached only to the current element. Then we just add a class so that the :after selector can be applied naturally without JS.

JSFIDDLE DEMO.

Answer 3

Try this code to change the background color in the Popover title bar and the full Popover:

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