benkaminski.com


How To Customize Bootstrap 3 Popovers Individually Using Only CSS!

How To Customize Bootstrap 3 Popovers Individually Using Only CSS!


  benkaminski.com

August 30th, 2014

11 comments Leave A Comment


I was recently tasked with a project that turned out to be rather challenging. I needed to find a way to use Bootstrap popovers as a navigation option as well as be able to style them individually of one another. By default, Bootstrap popovers are style-able but whatever CSS overrides you use will apply to all the popovers, leaving you with only one possible styling scenario. Once again, I needed to make each popover different than the other — style-wise — so I started to do some research.

This tutorial assumes that you already know how to use Bootstrap popovers and data-attributes. If you don’t, go to Bootstrap’s website and learn about them there.

Example of Bootstrap Popovers

Styling the Popover

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

So after being frustrated I went back to Bootstrap’s website to read more documentation on using the popovers when low and behold, Bootstrap (while not actually saying you can) gives you a hint on their site in the popovers section on how you could possibly style them. It’s listed in one of their data attributes and it’s called data-template=””.

So wait a second here… If I can add those HTML attributes to the popover string of HTML… hmmmmmm. Then that means I can rename those classes and style them individually??? Perhaps I can… here’s how:

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


<div class="text-center example-class" data-container="body" data-template='<div class="popover" role="tooltip"><div class="arrow"></div><div class="popover-content"></div></div>' data-toggle="popover" data-placement="left" data-content="this is a test">
*notice I’m using a div class to trigger the popover here, this also can be applied to links or buttons. Also, I’m not using the “popover-title” class because it was not needed for my own purposes.*

Anyhow, nothing happening yet. All I’ve done is put the standard “template” HTML in the data-attributes section of my code. With a little outside of the box thinking we can start to visualize how we’re going to style these popovers.

So, I have 3 div’s that I’m using as navigation links to trigger these popovers. The code looks like this:


<div class="text-center example-class1" data-container="body" data-template='<div class="popover1" role="tooltip"><div class="arrow"></div><div class="popover-content"></div></div>' data-toggle="popover" data-placement="left" data-content="this is a test">
<div class="text-center example-class2" data-container="body" data-template='<div class="popover2" role="tooltip"><div class="arrow"></div><div class="popover-content"></div></div>' data-toggle="popover" data-placement="left" data-content="this is also a test">
<div class="text-center example-class3" data-container="body" data-template='<div class="popover3" role="tooltip"><div class="arrow"></div><div class="popover-content"></div></div>' data-toggle="popover" data-placement="left" data-content="this may or may not be a test">
*Notice 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 need to do some serious CSS overrides here, so I downloaded Bootstrap’s source code from their download page so I could see the un-minified CSS. I now need to gather all of the CSS relating to the popovers here so I opened the “bootstrap.css” file and searched for “popover” here’s what I found:


/* FULL POPOVER CSS FOR ALL POPOVERS */
.popover {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1060;
  display: none;
  max-width: 276px;
  padding: 1px;
  text-align: left;
  white-space: normal;
  background-color: #fff;
  -webkit-background-clip: padding-box;
          background-clip: padding-box;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, .2);
  border-radius: 6px;
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
          box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
}
.popover.top {
  margin-top: -10px;
}
.popover.right {
  margin-left: 10px;
}
.popover.bottom {
  margin-top: 10px;
}
.popover.left {
  margin-left: -10px;
}
.popover-title {
  padding: 8px 14px;
  margin: 0;
  font-size: 14px;
  font-weight: normal;
  line-height: 18px;
  background-color: #f7f7f7;
  border-bottom: 1px solid #ebebeb;
  border-radius: 5px 5px 0 0;
}
.popover-content {
  padding: 9px 14px;
}
.popover > .arrow,
.popover > .arrow:after {
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
}
.popover > .arrow {
  border-width: 11px;
}
.popover > .arrow:after {
  content: "";
  border-width: 10px;
}
.popover.top > .arrow {
  bottom: -11px;
  left: 50%;
  margin-left: -11px;
  border-top-color: #999;
  border-top-color: rgba(0, 0, 0, .25);
  border-bottom-width: 0;
}
.popover.top > .arrow:after {
  bottom: 1px;
  margin-left: -10px;
  content: " ";
  border-top-color: #fff;
  border-bottom-width: 0;
}
.popover.right > .arrow {
  top: 50%;
  left: -11px;
  margin-top: -11px;
  border-right-color: #999;
  border-right-color: rgba(0, 0, 0, .25);
  border-left-width: 0;
}
.popover.right > .arrow:after {
  bottom: -10px;
  left: 1px;
  content: " ";
  border-right-color: #fff;
  border-left-width: 0;
}
.popover.bottom > .arrow {
  top: -11px;
  left: 50%;
  margin-left: -11px;
  border-top-width: 0;
  border-bottom-color: #999;
  border-bottom-color: rgba(0, 0, 0, .25);
}
.popover.bottom > .arrow:after {
  top: 1px;
  margin-left: -10px;
  content: " ";
  border-top-width: 0;
  border-bottom-color: #fff;
}
.popover.left > .arrow {
  top: 50%;
  right: -11px;
  margin-top: -11px;
  border-right-width: 0;
  border-left-color: #999;
  border-left-color: rgba(0, 0, 0, .25);
}
.popover.left > .arrow:after {
  right: 1px;
  bottom: -10px;
  content: " ";
  border-right-width: 0;
  border-left-color: #fff;
}

Now, I know this looks like a lot of work but here’s the thing, this is ALL of the styling for all of the types of popovers there are. You will not need to change all of this CSS!!! You just need to figure out which classes apply to what you are trying to do. 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 go ahead and start trimming the fat on my CSS for my custom popovers. After I eliminated all of the bloat that I am not using my CSS now looks like this:


/* TRIMMED POPOVER CSS FOR MY USE CASE */
.popover
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1060;
  display: none;
  max-width: 276px;
  padding: 1px;
  text-align: left;
  white-space: normal;
  background-color: #fff;
  -webkit-background-clip: padding-box;
          background-clip: padding-box;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, .2);
  border-radius: 6px;
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
          box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
}
.popover.left {
margin-left: -10px;
}
.popover > .arrow,
.popover > .arrow:after {
position: absolute;
display: block;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
.popover > .arrow {
border-width: 11px;
}
.popover > .arrow:after {
content: "";
border-width: 10px;
}
.popover.left > .arrow {
top: 50%;
right: -11px;
margin-top: -11px;
border-right-width: 0;
border-left-color: #999;
border-left-color: rgba(0, 0, 0, .25);
}
.popover.left > .arrow:after {
  right: 1px;
  bottom: -10px;
  content: " ";
  border-right-width: 0;
  border-left-color: #fff;
}
*as you can see, much more 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 above (popover1, popover2, and popover3) to create three uniquely styled popovers. To do so, we’re going to have to copy the above code and paste it 2 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:


/* CUSTOM POPOVERS */

/* ========== BEGIN POPOVER 1 ========== */
.popover1 {
position: fixed !important;
top: 0;
left: 0;
z-index: 1060;
display: none;
width: 250px !important;
padding: 1px;
text-align: left;
white-space: normal;
background-color: #2a4254 !important;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, .2);
border-radius: 0px !important;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
}
.popover1.left {
margin-left: -10px;
}
.popover1 > .arrow,
.popover1 > .arrow:after {
position: absolute;
display: block;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
.popover1 > .arrow {
border-width: 11px;
}
.popover1 > .arrow:after {
content: "";
border-width: 10px;
}
.popover1.left > .arrow {
top: 50%;
right: -11px;
margin-top: -11px;
border-right-width: 0;
border-left-color: #999;
border-left-color: rgba(0, 0, 0, .25);
}
.popover1.left > .arrow:after {
right: 1px;
bottom: -10px;
content: " ";
border-right-width: 0;
border-left-color: #2a4254;
}
/* ========== END POPOVER 1 ========== */

/* ========== BEGIN POPOVER 2 ========== */
.popover2 {
position: fixed !important;
top: 0;
left: 0;
z-index: 1060;
display: none;
width: 250px !important;
padding: 1px;
text-align: left;
white-space: normal;
background-color: #e87d34 !important;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, .2);
border-radius: 0px !important;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
}
.popover2.left {
margin-left: -10px;
}
.popover2 > .arrow,
.popover2 > .arrow:after {
position: absolute;
display: block;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
.popover2 > .arrow {
border-width: 11px;
}
.popover2 > .arrow:after {
content: "";
border-width: 10px;
}
.popover2.left > .arrow {
top: 50%;
right: -11px;
margin-top: -11px;
border-right-width: 0;
border-left-color: #999;
border-left-color: rgba(0, 0, 0, .25);
}
.popover2.left > .arrow:after {
right: 1px;
bottom: -10px;
content: " ";
border-right-width: 0;
border-left-color: #e87d34;
}
/* ========== END POPOVER 2 ========== */

/* ========== BEGIN POPOVER 3 ========== */
.popover3 {
position: fixed !important;
top: 0;
left: 0;
z-index: 1060;
display: none;
width: 250px !important;
padding: 1px;
text-align: left;
white-space: normal;
background-color: #bfd8ea !important;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, .2);
border-radius: 0px !important;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
}
.popover3.left {
margin-left: -10px;
}
.popover3 > .arrow,
.popover3 > .arrow:after {
position: absolute;
display: block;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
.popover3 > .arrow {
border-width: 11px;
}
.popover3 > .arrow:after {
content: "";
border-width: 10px;
}
.popover3.left > .arrow {
top: 50%;
right: -11px;
margin-top: -11px;
border-right-width: 0;
border-left-color: #999;
border-left-color: rgba(0, 0, 0, .25);
}
.popover3.left > .arrow:after {
right: 1px;
bottom: -10px;
content: " ";
border-right-width: 0;
border-left-color: #bfd8ea !important;
}
/* ========== END POPOVER 3 ========== */

/* END CUSTOM POPOVERS */

/* EXAMPLE CLASSES */
.example-class1 {
background-color: #2a4254;
height: 77px;
width: 77px;
color: white;
cursor: pointer;
float: right;
}
.example-class2 {
background-color: #e87d34;
height: 77px;
width: 77px;
color: white;
cursor: pointer;
float: right;
margin-top: 80px;
}
.example-class3 {
background-color: #bfd8ea;
height: 77px;
width: 77px;
color: white;
cursor: pointer;
float: right;
margin-top: 160px;
}
/* END EXAMPLE CLASSES */
*I basically just removed the border-radius to make it square and changed the background color as well as the arrow colors to match the background colors of the div that is triggering them.*

Result:

The final product, custom, individual popoveers

Following 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 order to demonstrate this, I have created a jsfiddle that you can view here:

View Demo on   

So, depending on your CSS skills at this point, the sky is the limit as 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 hope you found this article helpful and informative and as always, I look forward to your comments 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *

This article currently has 11 comments.

Filipe Torres

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

    Ben Kaminski
    Post author

    Thanks for pointing that out Filipe! I must have deleted it by accident. I have restored it on JSFiddle so click the link again and you can see it in action. I also realized that this only works with Bootstrap Ver: 3.2, newer versions of Bootstrap will need tweaking as — well — things have changed between now and then. Thanks again 😀

Suraj Belvadi

Thanks for the example. i know it is a couple of years later.. but it is helping me.

What if the content is large ,we cant just put that lengthy content in data-content attribute.
Then how is it possible???

    Ben Kaminski
    Post author

    You literally answered your own question. Popovers are not meant for large amounts of data. Use another bootstrap feature like a modal or create your own content areas that are large enough for your content. You’ll have to think outside the box with this one, but I would start with changing the CSS you see above to make the boxes large enough to contain your content perhaps? 😉

Really nice and helpful tutorial. Thank you very much.

arrow top y bottom?

This was exact tutorial I needed, thanks be upon you friend.

Related Topics: , , , , , ,