# jQuery UI Tooltip

## Overview

Tooltip replaces native tooltips, making them themable as well as allowing various customizations:

- display other content than 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

- jQuery UI Core
- jQuery UI Widget
- jQuery UI Position

### Example

- Demo
- View Source

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>

    <link href="http://view.jqueryui.com/tooltip/themes/base/jquery.ui.tooltip.css" rel="stylesheet" type="text/css"/>
    <script src="http://view.jqueryui.com/tooltip/ui/jquery.ui.tooltip.js"></script>

      <script>
      $(document).ready(function() {
        $("[title]").tooltip();
      });
      </script>
    </head>
    <body style="font-size:62.5%;">
      <p>
    <a href="#" title="Anchor description">Anchor text</a>
    <input title="Input help" />
    </p>

    </body>
    </html>

## Options

- ### 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"} );

## Events

- ### 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) {
          ...
        });

## Methods

- ### 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.

## Theming

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.