Home » jQuery UI Tooltip

jQuery UI Tooltip

by Online Tutorials Library

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.

Syntax:

You can use the tooltip() method in two forms.

First Method

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.

Syntax:

You can use one or more options at a time using Javascript object. In the case of more than one options, you will separate them using a comma as follows:

Following is a list of different options that can be used with this method.

Option Description
content This option is used to represent the content of a tooltip. By default its value is function returning the title attribute.
disabled If you set this option to true, it disables the tooltip. By default its value is false.
hide This option is used to represent the animation effect when hiding the tooltip. By default its value is true.
items This option specifies which items can show tooltips. By default its value is [title].
position This option is used to indicate the position of the tooltip with respect to the associated target element. By default its value is function returning the title attribute. Its possible values are: my, at, of, collision, using, within.
show This option represents how to animate the showing of tooltip. By default its value is true.
tooltipClass This option is a class which can be added to the tooltip widget for tooltips such as warning or errors. By default its value is null.
track If you set this option to true, the tooltip follows/tracks the mouse. By default its value is false.

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

Second method

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.

Syntax:

Following is a list of different actions used with this method.

Action Description
close() This action is used to close the tooltip. This method does not accept any arguments.
destroy() This action is used to remove the tooltip functionality completely. This will return the element back to its pre-init state. This method does not accept any arguments.
disable() This action is used to deactivate the tooltip. This method does not accept any arguments.
enable() This action activates the tooltip. This method does not accept any arguments.
open() This action programmatically opens the tooltip. This method does not accept any arguments.
option(optionName) This action gets the value associated with optionName for the tooltip. This method does not accept any arguments.
option() This action gets an object containing key/value pairs representing the current tooltip options hash. This method does not accept any arguments.
option(optionName, Value) This action sets the value of the tooltip option associated with the specified optionName.
option(Options) This action sets one or more options for tooltip.
widget() This action returns a jQuery object containing the original element. This method does not accept any arguments.

Event methods used with tooltip elements:

jQueryUI triggers event methods for a particular event. Following is a list of these event methods:

Event Method Description
create(event,ui) It is triggered when the tooltip is created. Here event is of type event, and ui is of type object.
close(event,ui) It is triggered when the tooltip is closed. It is usually triggers on focusout or mouseleave. Here event is of type event, and ui is of type object.
open(event,ui) It is triggered when the tooltip is displayed or shown. It is usually triggered on focusin or mouseover. Here event is of type event, and ui is of type object.

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

Next TopicjQuery UI Hide

You may also like