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.
|
1 2 3 4 5 |
<script type="text/javascript"> $(document).ready(function(){ $('[data-toggle="popover"]').popover(); }); </script> |
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.
|
1 2 3 4 5 6 |
<script type="text/javascript"> $(document).ready(function(){ $('[data-toggle="popover"]').popover(); }); </script> <a href="#." data-toggle="popover" title="Popover title" data-content="Simple overlay popover created using Bootstrap.">Simple Popover</a> |
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.
|
1 2 3 4 5 6 |
<script type="text/javascript"> $(document).ready(function(){ $('[data-toggle="popover"]').popover(); }); </script> <a href="#." data-placement="right" data-toggle="popover" title="Popover title" data-content="Right direction popover">Right Popover</a> |
Output
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.
|
1 |
<a href="#." data-placement="left" data-toggle="popover" title="Popover title" data-content="Left direction popover">Left Popover</a> |
Output
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.
|
1 |
<a href="#." data-placement="top" data-toggle="popover" title="Popover title" data-content="Top direction popover">Top Popover</a> |
Output
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.
|
1 |
<a href="#." data-placement="bottom" data-toggle="popover" title="Popover title" data-content="Bottom direction popover">Bottom Popover</a> |
Output