Bootstrap Popover

Learn how to create a popover using the bootstrap in this tutorial. A bootstrap popover is the simplest way of creating an overlay for an element. A popover is the small overlays of content as like those on the iPad to display the secondary information of an element.

Your user clicks on the element and the information comes out as an overlay. An overlays popover contains the information in the form of the heading and content with information for the element.

Simple Bootstrap Popover

To create a simple Popover, you need to use the anchor links, buttons or any other HTML elements. On these elements, you have to add the attribute data-toggle="popover". Now add the attribute title to add the title of the popover and add attribute data-content for informational content.

This will not display the bootstrap popover, you need to trigger popover using the javascript given below.

Below is the example of the popover you can use on the website for your visitors. Don’t forget to add the javascript code and trigger the popover.

Test it Live

Output


Simple Popover

Hover over the anchor link given above to see the popover. The tooltip appears above contains the heading and the content.

Setting Direction of Bootstrap Popover

Set the direction of the popover to right, left, top and bottom. See the examples below to create a popover using bootstrap with directions. Use the attribute data-placement with the directional values given below.

Right Direction Popover

Add attribute data-placement to the anchor link or buttons with the value right and put your heading in the attribute title and information in the attribute data-content.

Test it Live

Output

Right Popover

Left Direction Popover

Use attribute data-placement to the anchor link or buttons and apply the value left. In addition to this, put your heading in the attribute title.

Test it Live

Output

Left Popover

Top Direction Popover

Top direction Popover can be created using attribute data-placement to the anchor link or buttons with the value top. Now, add your heading in the attribute title.

Test it Live

Output

Top Popover

Bottom Direction Popover

Bottom direction Popover can be created using the attribute data-placement to the anchor link or buttons with the value bottom and put your heading in the attribute title.

Test it Live

Output

Bottom Popover