JqueryUI: Widget - Tooltip

Options

classes

$( ".selector" ).tooltip({  
   classes: {    
      "ui-tooltip": "highlight"  
   }
});

content

Multiple types supported:

• Function: A callback which can either return the content directly or call the first argument, passing in the content, e.g., for Ajax content.
• String: A string of HTML to use for the tooltip content.
• Element: A DOM element to use for the tooltip content.
• jQuery: A jQuery object to use for the tooltip content.

$(".selector").tooltip(
   { content: "Example content!" }
);

disabled

This option when setting to true disables the tooltip. Its default value is false.

$(".selector").tooltip(
   { disabled: true }
);

hide

If and how to animate the hiding of the tooltip. Multiple types supported:

• Boolean: This can be true or false. When set to true, the tooltip will fade out with the default duration and the default easing.
• Number: The tooltip will fade out with the specified duration and the default easing.
• String: The tooltip will be hidden using the specified effect such as “slideUp”, “fold”.
• Object: Possible values are effect, delay, duration, and easing.

$(".selector").tooltip(
   { hide: { effect: "explode", duration: 1000 } }
);

items

This option indicates which items can show tooltips. By default its value is [title].

$(".selector").tooltip(
   { items: "img[alt]" }
);

position

This option decides the position of the tooltip w.r.t the associated target element. By default its value is { my: "left top+15", at: "left bottom", collision: "flipfit" }.

$(".selector").tooltip(
   { { my: "left top+15", at: "left bottom", collision: "flipfit" } }
);

show

This option represents how to animate the showing of the tooltip. By default its value is true. Multiple types supported:

• Boolean − This can be true or false. When set to true, the tooltip will fade out with the default duration and the default easing.
• Number − The tooltip will fade out with the specified duration and the default easing.
• String − The tooltip will be hidden using the specified effect such as “slideUp”, “fold”.
• Object − Possible values are effect, delay, duration, and easing.

$(".selector").tooltip(
   { show: { effect: "blind", duration: 800 } }
);

tooltipClass

A class to add to the widget, can be used to display various tooltip types, like warnings or errors. By default its value is null.

$(".selector").tooltip(
   { tooltipClass: "custom-tooltip-styling" } }
);

track

Whether the tooltip should track (follow) the mouse. By default its value is false.

$(".selector").tooltip(
   { track: true }
);

Methods

close()

This action closes the tooltip. This method does not accept any arguments.

$(".selector").tooltip("close");

destroy()

Removes the tooltip functionality completely. This will return the element back to its pre-init state. This method does not accept any arguments.

$(".selector").tooltip("destroy");

disable()

This action deactivates the tooltip. This method does not accept any arguments.

$(".selector").tooltip("disable");

enable()

This action activates the tooltip. This method does not accept any arguments.

$(".selector").tooltip("enable");

instance()

Retrieves the tooltip’s instance object. If the element does not have an associated instance, undefined is returned. This method does not accept any arguments.

$( ".selector" ).tooltip( "instance" );

open()

This action programmatically opens the tooltip. This method does not accept any arguments.

$(".selector").tooltip("open");

option( optionName )

This action gets the value associated with optionName for the tooltip. This method does not accept any arguments.

var isDisabled = $( ".selector" ).tooltip( "option", "disabled" );

option()

This action gets an object containing key/value pairs representing the current tooltip options hash. This method does not accept any arguments.

$(".selector").tooltip("option");

option( optionName, value )

This action sets the value of the tooltip option associated with the specified optionName.

$( ".selector" ).tooltip( "option", "disabled", true );

option( options )

This action sets one or more options for tooltip.

$( ".selector" ).tooltip( "option", { disabled: true } );

widget()

This action returns a jQuery object containing the original element. This method does not accept any arguments.

$(".selector").tooltip("widget");

Events

close(event, ui)

Triggered when a tooltip is closed, triggered on focusout or mouseleave. Where event is of type Event, and ui is of type Object. Possible values of ui are: tooltip is of type JQuery

$(".selector").tooltip(
   close: function(event, ui) {}
);

create(event, ui)

Triggered when the tooltip is created. Where event is of type Event, and ui is of type Object.

$(".selector").tooltip(
   create: function(event, ui) {}
);

open(event, ui)

Triggered when the tooltip is displayed or shown. Usually triggered on focusout or mouseleave. Where event is of type Event, and ui is of type Object. Possible values of ui are: tooltip is of type JQuery

$(".selector").tooltip(
   open: function(event, ui) {}
);