Bootstrap5 Tooltip
A tooltip is a small popup that appears when the mouse moves over an element, and disappears when the mouse moves away from the element.
How to create a tooltip
By adding to an elementdata-bs-toggle="tooltip"to create a tooltip.
titleThe content of the attribute is the content displayed in the tooltip:
<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" title="I am the tooltip content!">Move the mouse over me</button>
Note:Tooltips must be written in the JavaScript initialization code: then call on the specified elementtooltip()method.
The following example can use 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)
})
Try it yourself »
Specify the tooltip position
By default, the tooltip appears above the element.
You can usedata-bs-placementthe attribute to set the direction in which the tooltip appears: top, bottom, left, or right:
Example
<a href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="I am the tooltip content!">Move the mouse over me</a>
<a href="#" data-bs-toggle="tooltip" data-bs-placement="bottom" title="I am the tooltip content!">Move the mouse over me</a>
<a href="#" data-bs-toggle="tooltip" data-bs-placement="left" title="I am the tooltip content!">Move the mouse over me</a>
<a href="#" data-bs-toggle="tooltip" data-bs-placement="right" title="I am the tooltip content!">Move the mouse over me</a>
Try it yourself »