Tooltip Widget

Categories: Widgets

Tooltip Widgetversion added: 1.9

Description: 可自定义的、可主题化的工具提示框，替代原生的工具提示框。

QuickNavExamples

Options

Methods

Events

工具提示框（Tooltip）取代了原生的工具提示框，让它们可主题化，也允许进行各种自定义：

  • 显示不仅仅是标题的其他内容，就如内联的脚注或通过 Ajax 检索的额外内容。
  • 自定义定位，例如，在元素上居中工具提示框。
  • 添加额外的样式来定制警告或错误区域的外观。

默认使用一个渐变的动画来显示和隐藏工具提示框，这种外观与简单的切换可见度相比更具灵性。这可以通过 show 和 hide 选项进行定制。

items 和 content 选项需要保持同步。如果您改变了其中一个，您需要同时改变另一个。

在一般情况下，禁用的元素不会触发任何 DOM 事件。因此，适当地控制禁用元素的工具提示框是不可能的，因为我们需要监听事件来决定何时显示和隐藏工具提示框。这就导致 jQuery UI 不能保证对附加到禁用元素上的工具提示框任何层次上的支持。这意味着如果您需要在禁用元素上进行提示，您可能需要使用一个原生的提示框和 jQuery UI 工具提示框的混合物。

主题（Theming）

工具提示框部件（Tooltip Widget）使用 jQuery UI CSS 框架 来定义它的外观和感观的样式。如果需要使用工具提示框指定的样式，则可以使用下面的 CSS class 名称：

  • ui-tooltip: 工具提示框的外层容器。
    • ui-tooltip-content: 工具提示框的内容。

依赖（Dependencies）

其他注意事项（Additional Notes）:

  • 该部件要求一些功能性的 CSS，否则将无法工作。如果您创建了一个自定义的主题，请使用小部件指定的 CSS 文件作为起点。

Options

contentType: Function() or String

Default: function returning the title attribute

tooltip(工具提示框)的内容。

当改变这个选项时，你可能还需要更改 items选项。

支持多个类型：
  • Function: 一个回调可以是直接返回的内容， 或通过在内容，调用第一个参数，例如，对于Ajax内容。
  • String: 一个HTML字符串作为tooltip(工具提示框)的内容。
Code examples:

初始化带有指定 content 选项的 tooltip(工具提示框)：

1
 
$( ".selector" ).tooltip({ content: "Awesome title!" });

在初始化后，获取或设置content 选项：

1
2
3
4
5
 
// getter
var content = $( ".selector" ).tooltip( "option", "content" );
 
// setter
$( ".selector" ).tooltip( "option", "content", "Awesome title!" );

disabledType: Boolean

Default: false
如果设置为 true，则禁用该 tooltip（工具提示框）。
Code examples:

初始化带有指定 disabled 选项的 tooltip(工具提示框)：

1
 
$( ".selector" ).tooltip({ disabled: true });

在初始化后，获取或设置disabled 选项：

1
2
3
4
5
 
// getter
var disabled = $( ".selector" ).tooltip( "option", "disabled" );
 
// setter
$( ".selector" ).tooltip( "option", "disabled", true );

hideType: Boolean or Number or String or Object

Default: true
tooltip(工具提示框)关闭（隐藏）时的动画效果。
支持多个类型：
  • Boolean: 当设置为false， 将不使用动画效果，该 tooltip(工具提示框) 会立即被隐藏。 如果设置为true， 该 tooltip(工具提示框) 将会以默认的持续时间和默认的效果淡出。
  • Number: 该 tooltip(工具提示框) 将以指定的时间和默认的效果淡出。
  • String: 该 tooltip(工具提示框) 将使用指定的效果被隐藏。 该值可以是一个jQuery内置的动画方法的名称， 如"slideUp"， 或一个 jQuery UI 效果的名称， 如"fold"。 在这两种情况下，将使用默认持续时间和默认的动画效果。
  • Object: 如果该值是一个对象， 那么 effect, delay, duration, 和easing可能要提供。  如果 effect 属性包含一个jQuery方法的名称， 那么该方法将被使用; 否则它被假定为是一个jQuery UI的效果的名称。 当使用jQuery UI 支持额外设置 的效果 ， 你可以在对象中包含那些设置 并且它们将被传递到的效果。如果duration持续时间或easing属性被省略， 那么默认值将被使用。 如果effect被省略， 那么"fadeOut" 将被使用。如果delay被省略， 那么将不使用延迟。
Code examples:

初始化带有指定 hide 选项的 tooltip(工具提示框)：

1
 
$( ".selector" ).tooltip({ hide: { effect: "explode", duration: 1000 } });

在初始化后，获取或设置hide 选项：

1
2
3
4
5
 
// getter
var hide = $( ".selector" ).tooltip( "option", "hide" );
 
// setter
$( ".selector" ).tooltip( "option", "hide", { effect: "explode", duration: 1000 } );

itemsType: Selector

Default: [title]

一个选择器表示哪些项目应该显示tooltip(工具提示框)。 如果您使用其他的东西自定义，那么title属性将作为tooltip(工具提示框)的内容， 或者你需要一个不同的选择来事件委托。

当改变这个选项时，你可能还需要改变的 content 选项。

Code examples:

初始化带有指定 items 选项的 tooltip(工具提示框)：

1
 
$( ".selector" ).tooltip({ items: "img[alt]" });

在初始化后，获取或设置items 选项：

1
2
3
4
5
 
// getter
var items = $( ".selector" ).tooltip( "option", "items" );
 
// setter
$( ".selector" ).tooltip( "option", "items", "img[alt]" );

positionType: Object

Default: { my: "left top+15", at: "left bottom", collision: "flipfit" }

确定 tooltip(工具提示框) 相对于 相关目标元素的位置。 of选项默认为目标元素， 但您可以指定其他元素来定位。 有关各个选项的更多细节， 你可以参考jQuery UI Position实用工具。

Code examples:

初始化带有指定 position 选项的 tooltip(工具提示框)：

1
 
$( ".selector" ).tooltip({ position: { my: "left+15 center", at: "right center" } });

在初始化后，获取或设置position 选项：

1
2
3
4
5
 
// getter
var position = $( ".selector" ).tooltip( "option", "position" );
 
// setter
$( ".selector" ).tooltip( "option", "position", { my: "left+15 center", at: "right center" } );

showType: Boolean or Number or String or Object

Default: true
tooltip(工具提示框) 打开（显示）时的动画效果。
支持多个类型：
  • Boolean: 当设置为false， 将不使用动画效果，该 tooltip(工具提示框) 会立即被隐藏。 如果设置为true， 该 tooltip(工具提示框) 将会以默认的持续时间和默认的效果淡出。
  • Number: 该 tooltip(工具提示框) 将以指定的时间和默认的效果淡出。
  • String: 该 tooltip(工具提示框) 将使用指定的效果被隐藏。 该值可以是一个jQuery内置的动画方法的名称， 如"slideUp"， 或一个 jQuery UI 效果的名称， 如"fold"。 在这两种情况下，将使用默认持续时间和默认的动画效果。
  • Object: 如果该值是一个对象， 那么 effect, delay, duration, 和easing可能要提供。  如果 effect 属性包含一个jQuery方法的名称， 那么该方法将被使用; 否则它被假定为是一个jQuery UI的效果的名称。 当使用jQuery UI 支持额外设置 的效果 ， 你可以在对象中包含那些设置 并且它们将被传递到的效果。如果duration持续时间或easing属性被省略， 那么默认值将被使用。 如果effect被省略， 那么"fadeOut" 将被使用。如果delay被省略， 那么将不使用延迟。
Code examples:

初始化带有指定 show 选项的 tooltip(工具提示框)：

1
 
$( ".selector" ).tooltip({ show: { effect: "blind", duration: 800 } });

在初始化后，获取或设置show 选项：

1
2
3
4
5
 
// getter
var show = $( ".selector" ).tooltip( "option", "show" );
 
// setter
$( ".selector" ).tooltip( "option", "show", { effect: "blind", duration: 800 } );

tooltipClassType: String

Default: null
一个CSS样式类名 添加到tooltip(工具提示框)小部件， 可用于显示各种提示类型， 像警告或错误。

这可能会被classes option取代。

Code examples:

初始化带有指定 tooltipClass 选项的 tooltip(工具提示框)：

1
 
$( ".selector" ).tooltip({ tooltipClass: "custom-tooltip-styling" });

在初始化后，获取或设置tooltipClass 选项：

1
2
3
4
5
 
// getter
var tooltipClass = $( ".selector" ).tooltip( "option", "tooltipClass" );
 
// setter
$( ".selector" ).tooltip( "option", "tooltipClass", "custom-tooltip-styling" );

trackType: Boolean

Default: false
tooltip(工具提示框)是否应该跟踪（跟随）鼠标。
Code examples:

初始化带有指定 track 选项的 tooltip(工具提示框)：

1
 
$( ".selector" ).tooltip({ track: true });

在初始化后，获取或设置track 选项：

1
2
3
4
5
 
// getter
var track = $( ".selector" ).tooltip( "option", "track" );
 
// setter
$( ".selector" ).tooltip( "option", "track", true );

Methods

close()Returns: jQuery (plugin only)

关闭 tooltip(工具提示框) 。这仅供非委派的 tooltip(工具提示框) 调用。
  • 该方法不接受任何参数。
Code examples:

调用 close 方法：

1
 
$( ".selector" ).tooltip( "close" );

destroy()Returns: jQuery (plugin only)

完全移除 tooltip(工具提示框) 功能. 这将使元素返回到之前的初始化状态.
  • 该方法不接受任何参数。
Code examples:

调用 destroy 方法：

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

disable()Returns: jQuery (plugin only)

禁用 tooltip(工具提示框)。
  • 该方法不接受任何参数。
Code examples:

调用 disable 方法：

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

enable()Returns: jQuery (plugin only)

启用 tooltip(工具提示框)。
  • 该方法不接受任何参数。
Code examples:

调用 enable 方法：

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

open()Returns: jQuery (plugin only)

以编程方式打开一个 tooltip(工具提示框) 。这仅供非委派的 tooltip(工具提示框) 调用。
  • 该方法不接受任何参数。
Code examples:

调用 open 方法：

1
 
$( ".selector" ).tooltip( "open" );

option( optionName )Returns: Object

获取当前与指定的 optionName 关联的值。
  • optionName
    Type: String
    要获取值的选项的名称。
Code examples:

调用该方法：

1
 
var isDisabled = $( ".selector" ).tooltip( "option", "disabled" );

option()Returns: PlainObject

获取一个包含键/值对的对象，键/值对表示当前 tooltip(工具提示框) 选项哈希。
  • 该方法不接受任何参数。
Code examples:

调用该方法：

1
 
var options = $( ".selector" ).tooltip( "option" );

option( optionName, value )Returns: jQuery (plugin only)

设置与指定的 optionName 关联的 tooltip(工具提示框) 选项的值。
  • optionName
    Type: String
    要设置的选项的名称。
  • value
    Type: Object
    要为选项设置的值。
Code examples:

调用该方法：

1
 
$( ".selector" ).tooltip( "option", "disabled", true );

option( options )Returns: jQuery (plugin only)

为 tooltip(工具提示框) 设置一个或多个选项。
  • options
    Type: Object
    要设置的 option-value 对。
Code examples:

调用该方法：

1
 
$( ".selector" ).tooltip( "option", { disabled: true } );

widget()Returns: jQuery

返回一个包含 生成包裹元素 的 jQuery 对象。
  • 该方法不接受任何参数。
Code examples:

调用 widget 方法：

1
 
var widget = $( ".selector" ).tooltip( "widget" );

Events

close( event, ui )Type: tooltipclose

当 tooltip(工具提示框) 关闭时触发，触发事件为focusout 或 mouseleave。
  • event
    Type: Event
  • ui
    Type: Object
    • tooltip
      Type: jQuery
      生成tooltip(工具提示框) 的元素。
Code examples:

初始化带有指定 close 回调的 tooltip(工具提示框)：

1
2
3
 
$( ".selector" ).tooltip({
  close: function( event, ui ) {}
});

绑定一个事件监听器到 tooltipclose 事件：

1
 
$( ".selector" ).on( "tooltipclose", function( event, ui ) {} );

create( event, ui )Type: tooltipcreate

在创建tooltip(工具提示框)时触发该事件。

注意：ui 对象是空的，这里包含它是为了与其他事件保持一致性。

Code examples:

初始化带有指定 create 回调的 tooltip(工具提示框)：

1
2
3
 
$( ".selector" ).tooltip({
  create: function( event, ui ) {}
});

绑定一个事件监听器到 tooltipcreate 事件：

1
 
$( ".selector" ).on( "tooltipcreate", function( event, ui ) {} );

open( event, ui )Type: tooltipopen

当tooltip(工具提示框)打开，显示时，触发此事件，触发的事件为focusin 或 mouseover。
  • event
    Type: Event
  • ui
    Type: Object
    • tooltip
      Type: jQuery
      生成tooltip(工具提示框) 的元素。
Code examples:

初始化带有指定 open 回调的 tooltip(工具提示框)：

1
2
3
 
$( ".selector" ).tooltip({
  open: function( event, ui ) {}
});

绑定一个事件监听器到 tooltipopen 事件：

1
 
$( ".selector" ).on( "tooltipopen", function( event, ui ) {} );

Example:

使用带有 title 属性的所有元素的事件代理，在文档上创建一个工具提示框（Tooltip）。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>tooltip 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>

Demo: