jQuery UI API - 工具提示框部件（Tooltip Widget） · W3School jQuery UI 教程

# jQuery UI API - 工具提示框部件（Tooltip Widget） ## 所属类别 [小部件（Widgets）](ref-widgets.html) ## 用法 **描述：**可自定义的、可主题化的工具提示框，替代原生的工具提示框。 **版本新增：**1.9 工具提示框（Tooltip）取代了原生的工具提示框，让它们可主题化，也允许进行各种自定义： * 显示不仅仅是标题的其他内容，就如内联的脚注或通过 Ajax 检索的额外内容。 * 自定义定位，例如，在元素上居中工具提示框。 * 添加额外的样式来定制警告或错误区域的外观。默认使用一个渐变的动画来显示和隐藏工具提示框，这种外观与简单的切换可见度相比更具灵性。这可以通过 [`show`](#option-show) 和 [`hide`](#option-hide) 选项进行定制。 [`items`](#option-items) 和 [`content`](#option-content) 选项需要保持同步。如果您改变了其中一个，您需要同时改变另一个。在一般情况下，禁用的元素不会触发任何 DOM 事件。因此，适当地控制禁用元素的工具提示框是不可能的，因为我们需要监听事件来决定何时显示和隐藏工具提示框。这就导致 jQuery UI 不能保证对附加到禁用元素上的工具提示框任何层次上的支持。这意味着如果您需要在禁用元素上进行提示，您可能需要使用一个原生的提示框和 jQuery UI 工具提示框的混合物。 ### 主题化工具提示框部件（Tooltip Widget）使用 [jQuery UI CSS 框架](api-css-framework.html) 来定义它的外观和感观的样式。如果需要使用工具提示框指定的样式，则可以使用下面的 CSS class 名称： * `ui-tooltip`：工具提示框的外层容器。 * `ui-tooltip-content`：工具提示框的内容。 ### 依赖 * [UI 核心（UI Core）](ref-ui-core.html) * [部件库（Widget Factory）](api-jQuery-widget.html) * [定位（Position）](api-position.html) * [特效核心（Effects Core）](ref-effects-core.html)（可选的；当与 [`show`](#option-show) 和 [`hide`](#option-hide) 选项一起使用时） ### 附加说明 * 该部件要求一些功能性的 CSS，否则将无法工作。如果您创建了一个自定义的主题，请使用小部件指定的 CSS 文件作为起点。 ## 实例使用带有 title 属性的所有元素的事件代理，在文档上创建一个工具提示框（Tooltip）。 ``` <!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="#" title="锚描述">锚文本</a> <input title="输入帮助"> </p> <script> $( document ).tooltip(); </script> </body> </html> ```