Apply CSS to popover in Bootstrap

Question

I want to apply custom CSS to the title and content of a popover in Bootstrap, however, it seems that my CSS is being ignored.

How can I apply specific CSS to the title and the content respectively?

$("#poplink").popover({
    html: true,
    placement: "right",
    trigger: "hover",
    title: function () {
        return $(".pop-title").html();
    },
    content: function () {
        return $(".pop-content").html();
    }
});

html, body {
    width: 100%;
    height: 100%;
}
.pop-div {
    font-size: 13px;
    margin-top: 100px;
}
.pop-title {
    display: none;
    color: blue;
    font-size: 15px;
}
.pop-content {
    display: none;
    color: red;
    font-size: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="pop-div">
    <a id="poplink" href="javascript:void(0);">Pop</a>
    <div class="pop-title">Title here</div>
    <div class="pop-content">Content here</div>
</div>

For example: http://jsfiddle.net/Mx4Ez/

Absquatulate

Answer 1

The reason appears to be that the javascript is creating brand new elements to display the popover itself. These new elements have different css class names than the original.

Try adding this to your css:

.popover-title {
    color: blue;
    font-size: 15px;
}
.popover-content {
    color: red;
    font-size: 10px;
}

Update

Depending on the library version you're using, the names may be different. If the above does not work, try using .popover-header and .popover-body instead.

Hellas

Any way to only apply it to a specific popover? I was hoping for something along the lines of: .popover({ templateCss: {...} }). – Stelliform

One good way to do this is with stylesheets. I'd personally avoid trying to set the styles through javascript so as to avoid having to call .popover(..) multiple times. Here's a fiddle of how I'd do it: jsfiddle.net/n8e92k4n/11 – Hellas

I'm using Angular. So if popover had a css option (or even better, a class option), the Angular Bootstrap UI would allow for making those adjustments in the Angular template. JS would not be touched :) – Stelliform

@MattPinkston Thanks, however, it doesn't work in my case since I'm using data-container="body". – Equate

@JustinSkiles $('#domEl').popover('toggle').on('inserted.bs.popover',function(){ $('.popover').css('color','#393939'); }); will update the color for .popover after inserting the popover into the dom. I'm using this with elements inside a canvas and it works. – Paphlagonia

@Stelliform I think my answer can help with your particular question. – Soapberry

Answer 2

If you have multiple popovers on your page and only want to style one of them, you can leverage the popover's template option to add another class:

$("#myElement").popover({
  template: '<div class="popover my-specific-popover" role="tooltip">...'
});

I started by just using the default value for template from the docs, and added my-specific-popover to the class attribute.

Soapberry

Answer 3

The newly created elements have the following hierarchy:

.popover
    |_  .popover-title
    |_  .popover-content

Which is injected after the element that triggers the popover (you can specify a specific container for the injected popover by setting the container option, in which case you will set the styles using the element that you passed as container). So to style a popover you can use css like the following example:

<div id="my-container">
  <a href="#" id="popover-trigger">Popover This!</a>
</div>

<style>
  .popover-title { color: green; }  /* default title color for all popovers */

  #my-container .popover-title { color: red; }  /* specific popover title color */
</style>

Keller

Answer 4

As Matt said before, it may depend on the bootstraps version, for v4.6 you should do:

.popover{
  background-color: red;
}
.popover-header {
  color: red;
}
.popover-body {
  color: blue;
}

Harpp

Answer 5

Bootstrap >= 5.0

You can override Bootstrap popover styles.

.popover {
  background-color: var(--main-bg-color);
  border: 1px solid var(--border-color);
}

.popover-body {
  color: var(--font-color);
}

.bs-popover-top {
  > .popover-arrow {
    &::before {
      border-top-color: var(--border-color);
    }

    &::after {
      border-top-color: var(--main-bg-color);
    }
  }
}

.bs-popover-end {
  > .popover-arrow {
    &::before {
      border-right-color: var(--border-color);
    }

    &::after {
      border-right-color: var(--main-bg-color);
    }
  }
}

.bs-popover-bottom {
  > .popover-arrow {
    &::before {
      border-bottom-color: var(--border-color);
    }

    &::after {
      border-bottom-color: var(--main-bg-color);
    }
  }
}

.bs-popover-start {
  > .popover-arrow {
    &::before {
      border-left-color: var(--border-color);
    }

    &::after {
      border-left-color: var(--main-bg-color);
    }
  }
}

And replace --main-bg-color, --border-color, and --font-color with yours.

Burp