Bootstrap5 Tooltip

A tooltip is a small pop-up window that appears when the mouse is moved over an element and disappears when the mouse is moved away from the element.

How to Create a Tooltip

Create a tooltip by adding data-bs-toggle="tooltip" to an element.

The content of the title attribute is the content displayed in the tooltip:

<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" title="This is the tooltip content!">Hover over me</button>

Note: Tooltips must be initialized in the JavaScript code by calling the tooltip() method on the specified element.

The following example can be used to apply tooltips anywhere in the document:

Example

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
})

Specifying the Tooltip Position

By default, the tooltip appears above the element.

You can use the data-bs-placement attribute to set the direction of the tooltip: top, bottom, left, or right:

Example

<a href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="This is the tooltip content!">Hover over me</a>
<a href="#" data-bs-toggle="tooltip" data-bs-placement="bottom" title="This is the tooltip content!">Hover over me</a>
<a href="#" data-bs-toggle="tooltip" data-bs-placement="left" title="This is the tooltip content!">Hover over me</a>
<a href="#" data-bs-toggle="tooltip" data-bs-placement="right" title="This is the tooltip content!">Hover over me</a>