Lesson 25: Popovers in Bootstrap 5

Popovers are also an important component in web and application design. Here's how to create a popover in Bootstrap 5.

 

What is Popover?

A popover element is similar to a tooltip. It's a pop-up box that appears when a user clicks on an element. The only difference is that a popover can contain more information.

How to create a popover in Bootstrap 5

To create a popover using Bootstrap 5 , add an attribute data-bs-toggle="popover"to an element.

Use the `title` property to define the title of the popover, and use it data-bs-contentto define the text that should be displayed inside the popover's content. Basic code:

Toggle popover

Note: Popovers must be launched using JavaScript.

The following code will enable all popovers in the document:

For example:

 Bootstrap Example 

Example of a Popover on QuanTriMang.com

  Nút popover  

 

Popover location

By default, the popover will appear to the right of the element. Use the property data-bs-placementto set the popover's position to the top, bottom, left, or right of the element. Sample code:

Top Bottom Left Right

For example:

Note: Position properties may not work as expected if there isn't enough space to display them. For example, if you want to display a popover at the top of the page but there isn't enough space for it, the screen will display the popover on the side where it can fully fit.

Close popover

By default, the popover closes when you click on the element again. However, you can use a property data-bs-trigger="focus"to close the popover when you click outside of that property. Sample code:

Click me

For example:

 Bootstrap Example 

Close the popover by clicking outside the element.

 Click link 

 

Popovers can be hovered over.

Tip: If you want a popover to appear when you hover your mouse cursor over an element on the page, use the attribute with data-bs-triggerthe value 'hover':

Hover over me 

For example:

 Bootstrap Example 

Popovers can be hovered over.

 Trỏ chuột vào đây 

Above is how to create a popover using Bootstrap 5. As you can see, it's quite simple, isn't it?