Hit enter after type your search item

Bootstrap 5 Popovers – 6 Examples including Custom popover

A little about Bootstrap 5 popover

A popover is like a tooltip that displays as a pop-up box without disrupting the page layout. A popover is different from a tooltip in that it may contain more content than tooltips.

Bootstrap 5 enables adding popover anywhere, with any element in your web pages.

Earlier versions of Bootstrap used jQuery, however, in Bootstrap 5, it is no more required.

You can learn more about popovers in Bootstrap 4.

An example of popover with button and link

First, let us have a look at a few examples and then we will explain how to create popover using BS 5 framework.

In the first example, we have a red button. This is to toggle popover i.e. if you first press it, it will open the popover. Upon clicking it again, it closes the popover. Have a look at the code and output:

See online demo and code

Bootstrap5-popover

Displaying popover on hover state

If you wish to display the popover as the mouse is over the element, this is quite easier to do.

In the example below, we have a button and a link. As you bring the mouse over the button/link, it will display the popover and it disappears you take mouse away from the element.

See online demo and code

Bootstrap5-popover-hov

So, how popover element works in Bootstrap 5?

  • Poppers are dependent on the js library. This is a third-party library, so you have to include this separately before bootstrap.js file.
  • Alternatively, you may use the bundle file i.e. bootstrap.bundle.min.js / bootstrap.bundle.js
  • BS5 popover also requires tooltip plug-in as dependency. If you are using bootstrap.js, bootstrap.min.js, OR bootstrap.bundle.min.js / bootstrap.bundle.js then you are done.
  • You have to initialize popovers yourself.

An example of popovers in all directions

You may also set the direction of popovers to which side of element it should appear (thanks to popper.js library).

You may set the following positions:

  • Top
  • Right
  • Bottom
  • Left
See online demo and code

BS5-popover-directions

Closing popover by clicking anywhere on webpage

In all the above examples, the popover is closed as you click on the button or link again – after you opened the popover (except hover example). However, it does not close automatically as you click somewhere else.

For closing the popover by clicking anywhere on the webpage (not the button itself), you may use the focus trigger.

In the example below, the data attribute data-bs-trigger=”focus” is used with a button and link:

See online demo and code

An example of popover with image

As mentioned earlier, you may use popover with various elements including images.

The following example uses popover with an image. Click on the image and it displays the popover.

See online demo and code

BS5-popover-images


Similarly, you may attach the popover to the HTML table’s <tr>, <td>, <th> tags etc.

Placing HTML content inside popover example

You may also customize the popover for placing more content than just simple text. This includes formatted content, and form fields as well. However, it requires some workaround.

This solution from codepin used jQuery for placing HTML content like a textbox field in the popover.

Have a look at this code and credit link at the bottom:

See online demo and code

BS5-popover-textbox


 

Credit: https://codepen.io/mgregchi/pen/XWaJrmM

This div height required for enabling the sticky sidebar