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.
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:
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
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 HoverFor 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.