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.

You've just finished reading the article "Lesson 24: Tooltips in Bootstrap 5" edited by the TipsMake team. You can save lesson-24-tooltips-in-sduca.pdf to your computer here to read later or print it out. We hope this article has provided you with many useful tech tips and tricks. You can search for similar articles on tips and guides. Thank you for reading and for following us regularly.