jQuery UI API - Tooltip Widget

Usage

Description: A customizable, themable tooltip widget that replaces the native tooltips.

Version Added: 1.9

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

Displaying not just title but other content, like inline footnotes or extra content retrieved via Ajax.
Custom positioning, such as centering the tooltip over an element.
Adding extra styles to customize the appearance of warning or error areas.

By default, a fading animation is used to show and hide the tooltip, which looks more dynamic than just toggling the visibility. This can be customized with the show and hide options.

The items and content options need to be kept in sync. If you change one, you need to change the other as well.

In general, disabled elements do not trigger any DOM events. Therefore, it is not possible to properly control tooltips for disabled elements, as we need to listen for events to decide when to show and hide the tooltip. This leads to jQuery UI not guaranteeing any level of support for tooltips attached to disabled elements. This means if you need tooltips on disabled elements, you might need to use a mix of native tooltips and jQuery UI tooltips.

Theming

The Tooltip Widget uses the jQuery UI CSS Framework to define its appearance and style. To use the styles specific to tooltips, you can use the following CSS class names:

ui-tooltip: The outer container of the tooltip.
ui-tooltip-content: The content of the tooltip.

Dependencies

UI Core
Widget Factory
Position
Effects Core (optional; when used with show and hide options)

Additional Notes

This widget requires some functional CSS, otherwise it will not work. If you create a custom theme, use the widget-specific CSS file as a starting point.

Example

Using event delegation on all elements with a title attribute, create a tooltip on the document.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Tooltip Widget Demo</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>

<p>
  <a href="#" title="Anchor description">Anchor text</a>
  <input title="Input help">
</p>
<script>
  $(document).tooltip();
</script>

</body>
</html>

View Demo