Tooltip Widget


Tooltip Widgetversion added: 1.9

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

QuickNavExamples

Events

工具提示框(Tooltip)取代了原生的工具提示框,让它们可主题化,也允许进行各种自定义:

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

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

itemscontent 选项需要保持同步。如果您改变了其中一个,您需要同时改变另一个。

在一般情况下,禁用的元素不会触发任何 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(工具提示框) 关闭时触发,触发事件为focusoutmouseleave
  • 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(工具提示框)打开,显示时,触发此事件,触发的事件为focusinmouseover
  • 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: