Bootstrap 4 Popover


Basic Popover

A popover in Bootstrap is a pop-up box. It looks a bit like a tooltip, but much more content can be stored in a popover than a tooltip. It is visible when the user clicks on an element.


Creating Popover Box

To create a popover, the data-toggle = "popover" attribute must be added to the element.

If you want to add a heading on top of the popover, you can specify what heading you want to put inside the title attribute.

To add content to the body of the popover, you need to add data-content attributes and add content inside it.

<button class="btn btn-primary" data-toggle="popover" title="Popover Heading" data-content="This is the popover content.">
Click me!</button>

jQuery Initialization

To turn on Popover, one must first initialize jQuery and call the popover() method.

<script type="text/javascript">
$(document).ready(function(){
$('[data-toggle=popover]').popover();
});
</script>

Popover data placement

To determine where the popover pop-up box will point to the element, you need to insert a data-placement attribute.

Top Popover

The popover will point the pop-up box to the top of the element. To do that, you need to insert the data-placement = "top" attribute.

Example code

<button class="btn btn-primary" data-placement="top" data-toggle="popover" title="Popover top side data placement" data-content="This is the popover content.">Click me!</button>

Bottom Popover

The popover will point the pop-up box to the bottom of the element. To do that, you need to insert the data-placement = "bottom" attribute.

Example code

<button class="btn btn-primary" data-placement="bottom" data-toggle="popover" title="Popover bottom side data placement" data-content="This is the popover content.">Click me!</button>

Left Popover

The popover will point the pop-up box to the left side of the element. To do that, you need to insert the data-placement = "left" attribute.

Example code

<button class="btn btn-primary" data-placement="left" data-toggle="popover" title="Popover left side data placement" data-content="This is the popover content.">Click me!</button>

Right Popover

The popover will point the pop-up box to the right side of the element. To do that, you need to insert the data-placement = "right" attribute.

Example code

<button class="btn btn-primary" data-placement="right" data-toggle="popover" title="Popover right side data placement" data-content="This is the popover content.">Click me!</button>

Popover With HTML Element

Example code

<button class="btn btn-primary" id="popoverbtn">Click me!</button>
<script type="text/javascript">
$(document).ready(function(){
$('#popoverbtn').popover({title:"<h4>Popover Heading</h4>",
content:"<p>This is the body of <strong>popover</strong></p>",
html:true,placement:"bottom"});
});
</script>

Closing Popover

This data-trigger = "focus" attribute is used when the user clicks outside the popover, the popover will disappear.

Example code

<button class="btn btn-primary" data-trigger="focus" data-toggle="popover" title="Popover Heading" data-content="This is the popover content.">
Click me!</button>

This data-trigger = "hover" attribute must be used when the user moves the mouse over the popover element to see the popover box.

Example code

<button class="btn btn-primary" data-trigger="hover" data-toggle="popover" title="Popover Heading" data-content="This is the popover content.">
Click me!</button>