Popovers in Bootstrap 5

Popovers are similar to tooltips but they contain more information regarding a particular element and only show its content when a user clicks on them. Popovers can be dismissed only by clicking on the element again. The purpose of popover is to give user knowledg about website or how to use it. It is also used to give descriptive knowledge about a product when the user demands it.

This article tells you about

• Popover Creation Process
• Popover Positions
• Closing Popover
• Popover on hovering

How to Create Popovers

To create a popover, add data-bs-toggle=”popover” and title=”Popover header text goes here” for popover’s header section and data-bs-content=”Popover body text goes here” for popover’s body section.

<img alt="" data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/bootstrap-popovers-01.gif" height="322" src="data:image/svg xml,” width=”596″>

Code

This process creates and enables a basic popover.

Popover Positions

So popovers are also positioned just like tooltips, to position a popover use data-bs-placement=”top/bottom/right/left” attribute with data-bs-toggle, title and data-bs-content attributes.

<img alt="" data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/bootstrap-popovers-02.gif" height="322" src="data:image/svg xml,” width=”596″>

Code

This is how popover positions are specified.

Closing Popovers

Popovers are closed only when you click the element or button again to which you click before to make it visible. However, if you want to close the popover by clicking anywhere on the screen, just add data-bs-trigger=”focus” attribute to your button or element.

<img alt="" data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/bootstrap-popovers-03.gif" height="322" src="data:image/svg xml,” width=”596″>

Code

This process closes a popover when you click anywhere on the screen. 

Popover on hover

As we know popovers are only visible when clicking on a button or element, but if you want that popover to be visible just by hovering the cursor over the element or button just like the tooltip, then add the data-bs-trigger=” hover” attribute to your button or element.

<img alt="" data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/bootstrap-popovers-04.gif" height="322" src="data:image/svg xml,” width=”596″>

Code

This is how popover appears on hovering.

Conclusion

Popover is created by adding the data-bs-toggle=“popover” attribute. Its header is created by adding Title=“Header Text” attribute and its body is created by adding the data-bs-content=“body text” attribute to your element or button. To enable popover to write a javascript code as written in the article. As popover is closed only by clicking on the element or button again, so for closing by clicking anywhere on the screen just add data-bs-trigger=“focus” attribute, and if you want to open popover by hovering the cursor only add attribute data-bs-trigger=“hover”.