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.