Skip to main content

Popover in Bootstrap 5

Bootstrap Popover​

Bootstrap provides a simple way to add popovers to any HTML element using the data-bs-toggle="popover" attribute.

Popovers are similar to tooltips, but they can contain more complex content such as images, links, and forms.

As an example:

Editor

Loading...

In this example:

  • We have a button that has a popover.
  • The data-bs-content attribute is used to specify the content that appears in the popover.
  • The title attribute is used to specify the title of the popover.
  • We use some JavaScript code to initialize the popovers using the bootstrap.Popover class.

Positioning Popovers​

You can position Bootstrap popovers using the data-bs-placement attribute.

This attribute can take one of the following values:

  • top
  • bottom
  • start (left)
  • end (right)
  • auto (the default)

As an example:

Editor

Loading...

In this example:

  • We added the data-bs-placement="start" attribute to the button element.
  • This will position the popover to the left of the button.
tip

You can replace start with any other value mentioned above to change the position of the popover.