Bootstrap 3 Popover with Image

Popovers are different from tooltips because they can contain more text. And a popover is a better choice if you want to display content like images. This tutorial will show  how to create a Bootstrap 3 popover with image.

But we’ll also look into other options and some things that might trip you up.
The markup and jQuery choices with Popovers are very similar to tooltips. So if you haven’t yet read the tutorial about tooltips my advice is to do that first.


The Bootstrap website doesn’t show the basic markup for a popover. Probably because it’s so much alike that of a tooltip.

A popover displays both a heading and some content (in this instance a bit of text). The heading is set with the title attribute. The content (if it’s text) with the data-content attribute.

In the example above the user has to click on a button to display the popover. By default the popover will display when the user clicks on this button. In this respect popovers differ from tooltips. A default tooltip only displays on hover and disappears as soon as the user doesn’t hover over the link anymore.

Because popover usually contain more content the default setting to trigger the popover is ‘click’. This gives the user the control over how long the popover stays visible. When he/she has seen/read the content a click is necessary to make the popover disappear.

To actually make the popover plugin work we also need to add this script before the closing body tag:

Important! Without the popover script your popover(s) won't work!
Although the Bootstrap website tells us that “You can use all Bootstrap plugins purely through the markup API without writing a single line of JavaScript.” this isn’t true for the popover (and tooltip) plugin.

DEMO - Popover (default)

Option ‘show’

If we want the popover to be displayed as soon as the visitor opens the web page (without any further trigger) we can set the option ‘show’:

With this setting the user only clicks on the trigger to make the popover disappear.
DEMO - Popover with option 'show'

Default title

As you have seen in the first example we can set the title for a popover with the title-attribute. If we want to make certain that a title is always displayed for each popover – even when we forget to set its title – we can set a default title:

Popover with image

A popover can contain different kinds of content. If you know how to add an image (and set the styling; which we’ll look into in the next tutorial) you will have no problem with any kind of content.

There are a few things you need to do:

  1. Do not insert anything in the attribute data-content; check to see if it’s empty because any content here will override the image in the script.
  2. Create a variable which holds the image.
  3. When you specify the content in the script use the variable name from step 2.
  4. Add “html: true”; this will assure that the browser will display the image. Without this it will display the code you use for the image.
DEMO - Popover with image

In the next tutorial we’ll add some specific styling to this tooltip. Generic styling can be done with CSS (or with LESS, and we’ll look into that in one of the LESS tutorials). But our next tutorial will focus on how to create a distinctive styling for a specific popover.

1 comment

Juan Carlos - December 23, 2015 Reply

Thanks! So glad I found this tutorial!

Add your comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Related Posts