jQuery UI Tooltip Widget 完整参考

jQuery UI Tooltip Widget 是用于创建提示框的一个jQuery UI组件。本文将详细介绍如何在您的网站中使用jQuery UI Tooltip Widget。

安装

您可以从jQuery UI官方网站（http://jqueryui.com/）下载jQuery UI，或者使用CDN链接（https://code.jquery.com/ui/1.12.1/jquery-ui.js）。

基本用法

jQuery UI Tooltip Widget 可以通过以下方式进行初始化：

$(document).tooltip();

上述代码将启动jQuery UI Tooltip Widget，并为页面上的所有元素添加提示框。您还可以使用以下设置对jQuery UI Tooltip Widget 进行更详细的自定义：

$(document).tooltip({
  items: "a",
  content: "Please click this link",
  track: true,
  show: {
    effect: "slideDown",
    delay: 250
  },
  hide: {
    effect: "explode",
    delay: 250
  }
});

选项

以下是可用于自定义jQuery UI Tooltip Widget 的选项：

disabled

• 类型：Boolean
• 默认值：false
• 描述：如果设置为true，则禁用jQuery UI Tooltip Widget。

items

• 类型：String
• 默认值："[title]:not([disabled])"
• 描述：定义将使用jQuery UI Tooltip Widget 的元素的选择器。

content

• 类型：String or Function
• 默认值：取自元素的 title 属性
• 描述：定义要在提示框中显示的内容。如果定义为function，则将在创建提示框时动态生成内容。

position

• 类型：Object or String
• 默认值："center bottom-20"
• 描述：定义提示框的位置。该选项可以指定一个对象，该对象包含两个用于设置X和Y位置的属性，或者可以定义为一个字符串。

show

• 类型：Object or String
• 默认值：null
• 描述：定义提示框显示时要使用的特效和延迟值。可以定义为一个对象，该对象包含effect和delay属性，或者可以定义为一个字符串。

hide

• 类型：Object or String
• 默认值：null
• 描述：定义提示框隐藏时要使用的特效和延迟值。可以定义为一个对象，该对象包含effect和delay属性，或者可以定义为一个字符串。

track

• 类型：Boolean
• 默认值：false
• 描述：如果设置为true，则提示框将跟踪鼠标的移动。

tooltipClass

• 类型：String
• 默认值：null
• 描述：定义自定义CSS类以应用于提示框元素。

contentSelector

• 类型：String
• 默认值：false
• 描述：定义一个子元素的选择器，该子元素的内容将用作提示框的内容。

showURL

• 类型：Boolean
• 默认值：false
• 描述：如果设置为true，则在提示框中显示链接的URL。

方法

以下是可用于修改 jQuery UI Tooltip Widget 的方法：

disable

$(selector).tooltip("disable");

禁用提示框。

enable

$(selector).tooltip("enable");

启用提示框。

option

$(selector).tooltip("option", optionName);
$(selector).tooltip("option", optionName, value);
$(selector).tooltip("option", options);

获取或设置选项。

destroy

$(selector).tooltip("destroy");

删除 jQuery UI Tooltip Widget 的事件处理程序和提示框元素。

事件

以下是可用于 jQuery UI Tooltip Widget 的事件：

create

当Tooltip Widget初始化时触发。

open

当提示框打开时触发。

close

当提示框关闭时触发。

beforeClose

在提示框关闭之前触发。

update

在更新提示框时触发。

结论

本文为您提供了使用 jQuery UI Tooltip Widget 的必要信息。了解了这些内容之后，您可以在您的网站上使用它提供的丰富的提示功能。