The Popover component in Bootstrap 4

A pop-up box based on Bootstrap 4 framework can be created by using the popover built-in plug-in. You may attach the popover to any HTML element that opens as that element is clicked or optionally in hovering state.

The popover requires including the tooltip.js plug-in. If you have included bootstrap.js or bootstrap.min.js then you do not need including the other plug-in separately.

One other requirement in Bootstrap 4 popovers is including the popper.js (or popper.min.js) before the reference of Bootstrap JS file. It is required for positioning of popovers.

The following section shows how to create popovers and displaying them in various directions.

How to create Bootstrap popover?

For creating a popover, use the data-toggle=”popover” attribute in the element like a button, link etc. See the following example where I created a button with that attribute.

You have to initiate the popover in the jQuery in order to popover work. Have a look:

Bootstrap popover

See online demo and code

The markup for this demo:

The script:

  • The title of the popover is set in the button tag along with data-content attribute where you may use the content to display in the popover.
  • In the script section, the ID of the button is used with .popover for initiating the Bootstrap popover.
  • The popover is toggleable. If you click the button, it displays the popover. Upon pressing the button again, the popover is closed.

Associating a popover with a link example

The following example shows using a popover with <a> tag. Just like the button, the popover is toggleable:

Bootstrap popover link

See online demo and code

The code:

The demo of popover in all directions

You may use the data-placement attribute in the element where you are creating a popover for setting the direction. The following values can be used in data-placement attribute:

  • top
  • bottom
  • left
  • right

See the following where all values are used for creating the popover in four directions. For that, the <a> tag is used with button classes. See the demo and code online:

Bootstrap popover directions

See online demo and code

The markup:

The script:

Rather than using the ID of the element, this time I simply used the data-toggle=”popover” for initializing all popovers at the single call.

Closing the popover by clicking anywhere

In each of the above examples, you might notice that the popover can be closed by clicking the button or link after it is opened. If you click somewhere else after opening the popover, it is not closed.

In this demo, the popover will be closed by clicking anywhere except the button element that contains the popover. So, open the popover after clicking the button and close it by clicking somewhere else on the demo page:

See online demo and code

The script:

See the complete code on the example page.

Trigger the popover on hover state

You may use the data attribute data-trigger=”hover” in the element or “hover” value in the jQuery code for opening the popover on mouse hover state rather than clicking the element.

In this demo, the “hover” value is used in the jQuery code for “trigger” option of popover. Bring the mous the over button to see popover opening:

See online demo and code

The script:

An example of using popover in Bootstrap 4 table

As mentioned earlier, you may create popovers with any element even HTML tables. This can be useful if you require showing further information in a row or table data level etc.

See this demo where every a popover is created for every other row and it is triggered on mouse hover state.

popover table

See online demo and code

The code:

The script:

You can see, the data attribute is used for opening the popover on mouse hover.