Bootstrap 5 Tooltips facilitates some pre-defined methods that we can use to trigger different types of functionalities in tooltips. The methods can be implemented using JavaScript and JQuery.
Bootstrap 5 Tooltips Usage Methods: The Tooltips Methods with their function are given below:
show(): The show() method can be used to show an element’s tooltip.
hide(): The hide() method can be utilized to show some extra information to the user when the user hovers over the element.
toggle(): The toggle() method is used to toggle show/hide hidden/shown Tooltips.
dispose(): This method will destroy a Tooltips element. (Deletes the DOM element's stored data)
enable(): The enable() method creates the ability for the Tooltips to be shown when hovered over.
disable(): The disabled() method abstains from the ability of the Tooltips to be shown when hovered over.
toggleEnabled(): The ability of the Tooltips to be shown or hidden is toggled by this method when hovered over.
update(): This method can be used to show some extra information to the user when the user hovers over the element or when the element with the tooltip is in focus.
getInstance(): This is a static method that can be used to obtain the Tooltips instance connected to a DOM element.
getOrCreateInstance(): It is a static method that either returns the relevant Tooltips element's instance or produces a new Tooltips instance if the one associated with the DOM element was not initialized.
Example 1: This example demonstrates the usage of the toggle, dispose, and getInstance() methods using JavaScript. The getInstance() method is used to obtain the instance of the tooltip and toggle and dispose of it.
Output:
Example 2: The example demonstrates the usage of the show, hide, and getOrCreateInstance() methods using JavaScript. The tooltips have no pre-initialized instance and it is created using the getOrCreateInstance() method and show and hide them.
