jQuery UI Tooltip

Tooltip replaces native tooltips, making them themable as well as allowing various customizations: Display other content then just the title, like inline footnotes or extra content retrieved via ajax; customize the positioning, eg. to center the tooltip above elements; add extra classes to customize the appearance, for warning or error fields.

A fade animation is used to show and hide the tooltip, making the appearance a bit more organic, compared to just toggling the visiblity.

Dependencies

UI Core
UI Widget
UI Position

Apply the widget to all elements with a title attribute.

$("[title]").tooltip();

<!DOCTYPE html>
<html>
<head>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
  
  <script>
  $(document).ready(function() {
    $("[title]").tooltip();
  });
  </script>
</head>
<body style="font-size:62.5%;">
  <a href="#" title="Anchor description">Anchor text</a> 
<input title="Input help" />

</body>
</html>

disabled

Type:

Boolean

Default:

false

Disables (true) or enables (false) the tooltip. Can be set when initialising (first creating) the tooltip.
Code examples
Initialize a tooltip with the disabled option specified.
```
$( ".selector" ).tooltip({ disabled: true });
```
Get or set the disabled option, after init.
```
//getter
var disabled = $( ".selector" ).tooltip( "option", "disabled" );
//setter
$( ".selector" ).tooltip( "option", "disabled", true );
```
content

Type:

Callback

Default:

function that returns the title attribute

The content of the tooltip. The callback can either return the content directly, or call the first argument, passing in the content, eg. for ajax content.
Code examples
Initialize a tooltip with the content option specified.
```
$( ".selector" ).tooltip({ content: function(response) {
  $.getJSON("tooltipcontent.html", response);
} });
```
Get or set the content option, after init.
```
//getter
var content = $( ".selector" ).tooltip( "option", "content" );
//setter
$( ".selector" ).tooltip( "option", "content", function(response) {
  $.getJSON("tooltipcontent.html", response);
} );
```
position

Type:

Options

Default:

{ my: "left top", at: "left bottom", offset: "15 0" }

Configuration for the Position utility, of option excluded (always configured by widget)
Code examples
Initialize a tooltip with the position option specified.
```
$( ".selector" ).tooltip({ position: {offset: "15 15"} });
```
Get or set the position option, after init.
```
//getter
var position = $( ".selector" ).tooltip( "option", "position" );
//setter
$( ".selector" ).tooltip( "option", "position", {offset: "15 15"} );
```

open

Type:

tooltipopen

Triggered when the tooltip is displayed. Can be used further modify or position the widget, eg. have it follow the mouse movement.
Code examples
Supply a callback function to handle the open event as an init option.
```
$( ".selector" ).tooltip({
   open: function(event, ui) { ... }
});
```
Bind to the open event by type: tooltipopen.
```
$( ".selector" ).bind( "tooltipopen", function(event, ui) {
  ...
});
```
close

Type:

tooltipclose

Triggered when the tooltip is hidden.
Code examples
Supply a callback function to handle the close event as an init option.
```
$( ".selector" ).tooltip({
   close: function(event, ui) { ... }
});
```
Bind to the close event by type: tooltipclose.
```
$( ".selector" ).bind( "tooltipclose", function(event, ui) {
  ...
});
```

destroy

Signature:

.tooltip( "destroy" )

Remove the tooltip functionality completely. This will return the element back to its pre-init state.
disable

Signature:

.tooltip( "disable" )

Disable the tooltip.
enable

Signature:

.tooltip( "enable" )

Enable the tooltip.
option

Signature:

.tooltip( "option" , optionName , [value] )

Get or set any tooltip option. If no value is specified, will act as a getter.
option

Signature:

.tooltip( "option" , options )

Set multiple tooltip options at once by providing an options object.
widget

Signature:

.tooltip( "widget" )

Returns the .ui-tooltip element.
open

Signature:

.tooltip( "open" )

Programmatically show the tooltip. Content and position depends on the related options.
close

Signature:

.tooltip( "close" )

Programmatically hide the tooltip.

The jQuery UI Tooltip plugin uses the jQuery UI CSS Framework to style its look and feel, including colors and background textures. We recommend using the ThemeRoller tool to create and download custom themes that are easy to build and maintain.

If a deeper level of customization is needed, there are widget-specific classes referenced within the jquery.ui.tooltip.css stylesheet that can be modified. These classes are highlighed in bold below.

Sample markup with jQuery UI CSS Framework classes

<div class="ui-tooltip ui-widget ui-corner-all ui-widget-content" id="ui-tooltip-0">
  <div class="ui-tooltip-content">
    tooltip content
  </div>
</div>

Note: This is a sample of markup generated by the tooltip plugin, not markup you should use to create a tooltip. The only markup needed for that is an elemenet with a title attribute.

jQuery UI Tooltip

Overview

Dependencies

Example

Options

disabled

Code examples

content

Code examples

position

Code examples

Events

open

Code examples

close

Code examples

Methods

destroy

disable

enable

option

option

widget

open

close

Theming

Sample markup with jQuery UI CSS Framework classes