How To Override Popover Content Background

I was recently tasked with a project that turned out to be rather challenging. I needed to find a mode to apply Bootstrap popovers every bit a navigation choice also as be able to way them individually of one some other. By default, Bootstrap popovers are style-able but whatever CSS overrides y'all use volition apply to all the popovers, leaving you with simply one possible styling scenario. One time over again, I needed to make each popover different than the other — style-wise — then I started to practice some research.

Example of Bootstrap Popovers

Styling the Popover

The power to style the Bootstrap popovers individually proved to be a fiddling more challenging although, in the end, pretty simple really. I did a few hours worth of research on styling popovers only to be mislead and frustrated. Many other programmers out at that place were saying to use Javascript or Jquery to pull this off but none of the fiddles or tutorials I establish really worked! And the ones that did really only offered very basic styling of the popover. I wanted full styling liberty!!!

And so afterwards being frustrated I went back to Bootstrap'southward website to read more than documentation on using the popovers when depression and behold, Bootstrap (while not really saying you tin) gives you a hint on their site in the popovers department on how you could possibly mode them. It'south listed in one of their information attributes and information technology's called data-template="".

So look a 2nd hither… If I tin add those HTML attributes to the popover string of HTML… hmmmmmm. Then that means I can rename those classes and style them individually??? Perchance I tin can… hither'due south how:

Just past looking at the above epitome, you can assume safely that these are the default classes used by Bootstrap to style their popovers. The classes ".popover", ".pointer", ".popover-title", and ".popover-content" are already styled within Bootstrap'southward core CSS (which should not be edited but can be overridden in a separate CSS file). And what Bootstrap'south website is telling me here is that I tin insert this data-attribute string into my existing popover string like this:

*notice I'm using a div form to trigger the popover here, this besides can exist applied to links or buttons. Too, I'k not using the "popover-championship" class because it was not needed for my ain purposes.*

Anyway, nothing happening nonetheless. All I've done is put the standard "template" HTML in the data-attributes section of my code. With a petty outside of the box thinking nosotros tin can first to visualize how we're going to style these popovers.

So, I have 3 div's that I'm using every bit navigation links to trigger these popovers. The code looks similar this:

*Find how I changed the default ".popover" class to ".popover1", ".popover2", and ".popover3" on each line respectively?*

Now we can start manipulating CSS!!!
In order to make this work, we demand to exercise some serious CSS overrides here, so I downloaded Bootstrap'due south source code from their download page so I could meet the un-minified CSS. I now need to get together all of the CSS relating to the popovers here then I opened the "bootstrap.css" file and searched for "popover" here'south what I found:

At present, I know this looks similar a lot of work but here's the affair, this is ALL of the styling for all of the types of popovers there are. You volition non need to change all of this CSS!!! You just need to figure out which classes employ to what you are trying to practise. For my example, my popovers are appearing to the left of the triggering div and I am NOT using popover titles AT ALL! Knowing that, I can get alee and start trimming the fatty on my CSS for my custom popovers. Subsequently I eliminated all of the bloat that I am not using my CSS now looks similar this:

*as you lot can see, much more than manageable CSS. Less lines of code to work with.*

Now, we're going to actually customize each individual popover by using the classes I made higher up (popover1, popover2, and popover3) to create 3 uniquely styled popovers. To practice then, we're going to have to copy the higher up lawmaking and paste information technology two times into our own CSS (and remembering to change the class names) sheet to override the core Bootstrap CSS.

Here is my finalized code with customizations added:

*I basically just removed the border-radius to make information technology square and changed the background colour besides as the arrow colors to match the groundwork colors of the div that is triggering them.*

Consequence:

The final product, custom, individual popoveers

Post-obit a process such as this, you can create as many individually customized popovers as you wish!!! Just keep repeating the CSS to your styling needs. In club to demonstrate this, I have created a jsfiddle that you can view here:

View Demo on

So, depending on your CSS skills at this betoken, the heaven is the limit every bit far as styling these popovers. I have only scratched the surface here. No javascript necessary, all CSS and seems to work very well to me. I promise you plant this commodity helpful and informative and equally e'er, I look forwards to your comments 🙂

If you found this article helpful, please share on social media.

This article currently has 12 comments.

Amazing, good tutorial..
Thank y'all very much 😀

Hi, your exemple in jsfiddle returned Mistake 404.
Could you update?
Thanks in advance and congratulations for this nice article.

Thanks for pointing that out Filipe! I must have deleted information technology by blow. I have restored it on JSFiddle so click the link over again and you tin see information technology in activity. I besides realized that this only works with Bootstrap Ver: iii.2, newer versions of Bootstrap will need tweaking equally — well — things have inverse between now and so. Thanks again 😀