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 Tipsmake.com

 English example text 

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 Tipsmake.com

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

English example text

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.