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?

What would be the param/value pair? I've tried `$('a').popover().css(".popover-title", "background:#ffff99");` and `$('a').popover().css("popoverBackground", "#FFFFE0");` with no luck. (PS, I'm a total bootstrap newb) — Korra, Jul 16 '13 at 18:17
I mean something like this: `$('a').popover().css("background-color", "#ffff99");`. Take a look at this documentation: http://api.jquery.com/css/ — Wellington Zanelli, Jul 16 '13 at 18:24
That changes the color of the element (in my case a button) not the popover itself — Korra, Jul 16 '13 at 18:43
[You can change the default template of the popover:](https://stackoverflow.com/a/68414468/6933766) — Leonid Minkov, Jul 16 '21 at 19:38

score 22 · Accepted Answer · answered Jul 16 '13 at 18:09

22

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

.popover-title{
    background: #ffff99;
}

answered Jul 16 '13 at 18:09

Joe

6,401
3
28
32

4

Ah ha, I got this working. `.popover-header{ background: #ffff99; } .popover-content{ background: #ffff99; }` Thanks! – Korra Jul 16 '13 at 18:27
2

Only problem is that this affects all popovers. How can I accomplish the same thing for a specific popover? – Korra Jul 16 '13 at 18:37
1

Give the popover's parent container another class: `.popover-container>.popover-title{background: #ffff99;}` – Joe Jul 16 '13 at 18:39
1

@Korra You could also put a class on the element or use the element type that generates the popover like this: `a ~ .popover{background: #ffff99;` or `a ~ .popover > .popover-title{background: #ffff99;` – Joe Jul 16 '13 at 18:56
it should be background: #ffff99 !important; – fc123 Dec 28 '14 at 06:47
This doesn't change the color of the popover arrow – Eric McWinNEr May 30 '18 at 14:41

score 12 · Answer 2 · answered Aug 25 '15 at 13:33

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.

This is the best option, create diferent popover classes for each contextual class in bootstrap — Bernardo Dal Corno, Aug 14 '17 at 20:15
Oh, and use these colors: div.popover-danger { background-color: #f2dede; border-color: #dca7a7; color: #a94442; } — Bernardo Dal Corno, Aug 14 '17 at 20:39
Also be aware of the arrow, because each direction has its own class — Bernardo Dal Corno, Aug 14 '17 at 20:58

score 0 · Answer 3 · edited Feb 28 '17 at 15:39

0

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

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

edited Feb 28 '17 at 15:39

michaeldever

359
4
14

answered Feb 12 '14 at 13:29

Vijay Siva

1

score 0 · Answer 4 · answered Jan 23 '20 at 02:55

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

score 0 · Answer 5 · answered Jul 18 '23 at 13:35

Since Bootstrap 5.2, popovers can be customized with CSS variables.

new bootstrap.Popover(document.querySelector('[data-bs-toggle=popover]'));
// initialize

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
<style>
.my-popover {
  --bs-popover-bg: lightyellow;
}
</style>
<button class="btn btn-primary" 
  data-bs-toggle="popover" data-bs-custom-class="my-popover"
  data-bs-content="This is the popover content.">
   Click for Popover
</button>

How to change the color of a Bootstrap popover in JavaScript

5 Answers5