Lesson 24: Tooltips in Bootstrap 5

A tooltip is a small pop-up box that appears when the user moves the mouse cursor over an element on the interface. Below is how to create a tooltip in Bootstrap 5 .

 

How to create tooltips in Bootstrap 5

To create a tooltip, add an attribute data-bs-toggle="tooltip"to an element. Use the title to define the content to be displayed in the tooltip:

Hover over me!

Note: Tooltips must be launched using JavaScript .

The following code will display all tooltips in the document:

For example:

 Bootstrap Example 

Example Tooltip on QuanTriMang.com

  Trỏ chuột vào nút bấm này!  

 

Locate the Tooltip

By default, the tooltip will appear above the corresponding element. Use the property data-bs-placementto set the tooltip's position to be above, below, to the left, or to the right of that element. Basic code:

Hover Hover Hover Hover

For example:

 Bootstrap Example 

Tooltip position on QuanTriMang.com

The data-bs-placement property specifies the tooltip position.

 Trên Dưới Trái Phải 

As you can see, creating tooltips using Bootstrap 5 isn't too difficult, right? You just need to remember some basic code and replace the values ​​appropriately, and you can embed it into your website or app to use it right away.