Bootstrap 3 Popover with different style

How do you create a popover with a different style from other popovers on the same web page?

Bootstrap 3 popover with different style

When you want to style one (or a few) popovers differently from the other popovers changing the LESS file or CSS style sheet is not the best way to go about it.

In this tutorial we’ll use an approach that makes use of a data- attribute.

Below you can see the markup for our differently styled popover:

The markup above contains a second popover with default styling (which has the option set to “show” and will display directly).

DEMO - Compare default popover and popover with different style

We achieve this effect by inserting a data- attribute. Look at line 22. You will see data-style="primary". This is a data-attribute that we create for the duration of the popover. We could have named it differently (e.g. “data-different” or “data-bkgdred”).

Now that we’ve created our data- attribute we can use it to style this popover.

In line 17 we use a CSS selector for the element with class “popover” that follows directly after our data- attribute. With this selector we give the background a different color and change the corners of the popover.

In line 18 you see that we used the same approach to style the header of the popover.

5 comments

Uttam - February 23, 2016 Reply

Its a good example.

Juli - September 1, 2015 Reply

Thanks! it really works! 😀

Martin - November 18, 2014 Reply

Great!

This was very much help, that I didn’t find anywhere else!!

Thanks!

Patty - March 17, 2015 Reply

These articles are great. I was able to get my tooltips working. But I need one more thing that I can’t find or get to work. I would like the title of the tooltip to be variable – based on my data. That’s why I wanted to use this tooltip instead of just putting my title in the a tag. However, I seem limited by the tooltip syntax. Any idea how I could do this? Thank you so much.

Theo - March 17, 2015 Reply

Hi Patty,

Thanks!

In the script you could create a variable for the title and call the value of that variable when you define the popover (the same approach as used to insert an image into the popover).

Cheers, Theo

Add your comment

Related Posts