Bootstrap 5 Tooltips usage is used to create the markup and the text on the elements when required, and the tooltip created is placed after the element that was triggered.
Using Javascript to launch Tooltips:
var example = document.getElementById('...')
var ... = new bootstrap.Tooltip(example, value)
Bootstrap 5 Tooltip usage :
Markup: Themarkup requires the title, data attribute, and on which element the tooltip wants to be placed. The tooltip is placed on the top of the elements by default.
Disabled elements: Disabled elements are not interactive with the user which means the user cannot hover, focus, or click the elements so we cannot trigger the tooltip for the disabled element. But we have a method to trigger the tooltip we wrap the disabled elements in <div> or <span> and pass the attribute tabindex="0".
Options: Options can be through the data attributes into the elements to perform some specific function. To pass the option we have to append the option name with data-bs- for example data-bs-animation=" true".
Methods: Bootstrap 5 tooltip Methods are used to perform some specific functions on tooltips like show, hide, toggle, enable, disable, etc.
Example 1: In this example, we will have a disabled element with a tooltip placed on the top and a button with a tooltip placed on the left of the element.
