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?
You can do this with CSS by using the .popover
, .popover-title
, and .popover-content
classes.
.popover-title{
background: #ffff99;
}
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With