jQuery UI Tooltip
The native tooltip is replaced by jQuery UI tooltip widget because the jQuery UI tooltip allows customization and adds new themes.
What is Tooltip?
Tooltips are used with the element to display a title in the title box next to the element, when you hover the element with your mouse. Tooltips can be attached to any element. If you want to display tooltip, just add title attribute to input elements and the title attribute value will be used as tooltip.
What does jQueryUI Tooltip do?
The jQuery UI tooltip() method adds tooltip to any element on which you want to display tooltip. It gives a fade animation by default to show and hide the tooltip, compared to just toggling the visibility.
You can use the tooltip() method in two forms.
The tooltip (options) method specifies that a tooltip can be added to an HTML element. The options parameter is an object that specifies the behavior and appearance of the tooltip.
Following is a list of different options that can be used with this method.
jQuery UI Tooltip() example 1
Let's take a simple example to demonstrate the tooltip functionality passing no parameters to the tooltip() method.Test it Now
jQueryUI Tooltip() method example 2
Use of position:
Let's take an example to demonstrate the usage of option position in the tooltip function of jQuery UI.Test it Now
jQuery UI Tooltip() method example 3
Use of content, track and disabled:
The following example demonstrates the usage of options content, track and disabled.Test it Now
The tooltip (action, params) method is used to perform an action on the tooltip elements, such as disabling the tooltip. The action is specified as a string in the first argument and optionally, you can use one or more params according to the given action.
Following is a list of different actions used with this method.
Event methods used with tooltip elements:
jQueryUI triggers event methods for a particular event. Following is a list of these event methods:
jQueryUI Tooltip() method example 4
Let's take an example to demonstrate event method usage during tooltip functionality. The following example uses the open and close events.Test it Now