jQuery UI API - Tooltip Widget

Category

Widgets

Usage

Description:A customizable, themeable tooltip that replaces the native tooltip.

Version added:1.9

Tooltip replaces the native tooltip, making them themeable and allowing various customizations:

  • Display content other than just the title, such as inline footnotes or additional content retrieved via Ajax.
  • Custom positioning, for example, centering the tooltip over the element.
  • Add additional styles to customize the appearance of warning or error areas.

By default, a gradient animation is used to show and hide the tooltip, which gives a more lively appearance compared to simply toggling visibility. This can be customized via theshowandhideoption.

itemsandcontentOptions need to be kept in sync. If you change one, you need to change the other at the same time.

In general, disabled elements do not trigger any DOM events. Therefore, it is impossible to properly control tooltips on disabled elements, because we need to listen to events to decide when to show and hide the tooltip. This results in jQuery UI not being able to guarantee any level of support for tooltips attached to disabled elements. This means that if you need tooltips on disabled elements, you may need to use a mixture of a native tooltip and the jQuery UI tooltip.

Theming

The Tooltip Widget usesthe jQuery UI CSS frameworkto define its look-and-feel styles. If you need to use Tooltip-specific styles, you may use the following CSS class names:

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

Dependencies

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.

Examples

Create a tooltip on the document using event delegation for all elements with a title attribute.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>工具提示框部件（Tooltip Widget）演示</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="../index.html" title="锚描述">锚文本</a>
  <input title="输入帮助">
</p>
<script>
  $( document ).tooltip();
</script>
 
</body>
</html>

Other Extensions