Apply CSS to popover in Bootstrap
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.
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.
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>