JqueryUI - 工具提示

JqueryUI工具提示 - 从基本到高级概念的简单简单步骤学习JqueryUI，其中包括概述，环境设置，交互，可拖动，可放置，可调整大小，可选，可排序，小部件，手风琴，自动完成，按钮，Datepicker，对话框，菜单， Progressbar，Slider，Spinner，Tabs，Tooltip，Effects，Add Class，Color Animation，Effect，Hide，Remove Class，Show，Switch Class，Toggle，Toggle Class，Utilities，Position，Widget Factory

jQueryUI的工具提示小部件取代了原生工具提示.此小部件添加新主题并允许自定义.首先让我们了解一下工具提示是什么？工具提示可以附加到任何元素.要显示工具提示，只需将 title 属性添加到输入元素，title属性值将用作工具提示.当您使用鼠标悬停元素时，title属性将显示在元素旁边的一个小框中.

jQueryUI提供了 tooltip()方法来添加工具提示到要显示工具提示的任何元素.与仅切换可见性相比，这默认显示淡入淡出动画以显示和隐藏工具提示.

语法

工具提示( )方法可以使用两种形式 :

$(selector, context).tooltip (options) 方法
$(selector, context).tooltip ("action", [params]) 方法

$(selector, context).tooltip (options) 方法

工具提示(选项)方法声明可以将工具提示添加到HTML元素. options 参数是一个对象，它指定工具提示的行为和外观.

语法

$(selector, context).tooltip(options);

您可以使用Javascript对象一次提供一个或多个选项.如果要提供多个选项，则使用逗号分隔它们，如下所示;

$(selector, context).tooltip({option1: value1, option2: value2..... });

下表列出了可与此方法一起使用的不同选项 :


  $(".selector").tooltip( {content:"some content！"} );
  $(".selector").tooltip( {disabled:true} );
  $(".selector").tooltip( {hide:{effect:"explode "，持续时间:1000}} );
  $(".selector").tooltip( {items:"img [alt]"} );
  $(".selector").tooltip( {{my:"left top + 15"，at:"left bottom"，collision:"flipfit" } );
  $(".selector").tooltip( {show:{effect:"blind "，持续时间:800}} );
  $(".selector").tooltip( {tooltipClass:"custom-tooltip-styling"}} );
  $(".selector").tooltip( {track:true} );

Sr.No.	选项&安培;描述
1	content 此选项代表工具提示的内容.默认情况下，其值为返回标题属性的函数. 选项 - 内容此选项表示工具提示的内容.默认情况下，其值为函数，返回标题属性.这可以是 : 功能 : 回调可以直接返回内容，也可以调用第一个参数，传入内容，例如.对于ajax内容. 字符串 : 用于工具提示内容的HTML字符串. 语法 $(".selector").tooltip( {content:"some content！"} );
2	disabled 此选项设置为 true 时会禁用工具提示.默认情况下，其值为 false . 选项 - 已停用设置为 true 时，此选项禁用工具提示.默认情况下，其值为 false . 语法 $(".selector").tooltip( {disabled:true} );
3	hide 此选项表示隐藏工具提示时的动画效果.默认情况下，其值为 true . 选项 - 隐藏此选项表示隐藏工具提示时的动画效果.默认情况下，其值为 true .这可以是 : 布尔 : 这可以是 true 或 false .当设置为 true 时，工具提示将以默认持续时间和默认缓动淡出. 数字 : 工具提示将以指定的持续时间和默认缓动淡出. 字符串 : 工具提示将使用指定的效果隐藏，例如"slideUp"，"fold". 对象 : 可能的值是效果，延迟，持续时间，和缓和. 语法 $(".selector").tooltip( {hide:{effect:"explode "，持续时间:1000}} );
4	items 此选项指示哪些项目可以显示工具提示.默认情况下，其值为 [title] . 选项 - 项目此选项指示哪些项目可以显示工具提示.默认情况下，其值为 [title] . 语法 $(".selector").tooltip( {items:"img [alt]"} );
5	position 此选项决定相关目标元素的工具提示的位置.默认情况下，其值为函数，返回标题属性.可能的值包括: my，at，of，collision，using，within. 选项 - 位置此选项决定相关目标元素的工具提示的位置.默认情况下，其值为函数，返回标题属性.可能的值包括: my，at，of，collision，using，within. 语法 $(".selector").tooltip( {{my:"left top + 15"，at:"left bottom"，collision:"flipfit" } );
6	show 此选项表示如何为工具提示的显示设置动画.默认情况下，其值为 true . 选项 - 显示此选项表示如何为工具提示的显示设置动画.默认情况下，其值为 true .这可以是 : 布尔 : 这可以是 true 或 false .当设置为 true 时，工具提示将以默认持续时间和默认缓动淡出. 数字 : 工具提示将以指定的持续时间和默认缓动淡出. 字符串 : 工具提示将使用指定的效果隐藏，例如"slideUp"，"fold". 对象 : 可能的值是效果，延迟，持续时间，和缓和. 语法 $(".selector").tooltip( {show:{effect:"blind "，持续时间:800}} );
7	tooltipClass 此选项是一个类，可以将其添加到工具提示窗口小部件中，以获取警告或错误等工具提示.默认情况下，其值为 null . 选项 - tooltipClass 此选项是一个类，可以将其添加到工具提示窗口小部件中，以获取警告或错误等工具提示.默认情况下，其值为 null . 语法 $(".selector").tooltip( {tooltipClass:"custom-tooltip-styling"}} );
8	track 此选项设置为 true 时，工具提示跟随/跟踪鼠标.默认情况下，其值为 false . 选项 - 跟踪此选项设置为 true 时，工具提示跟随/跟踪鼠标.默认情况下，其值为 false . 语法 $(".selector").tooltip( {track:true} );

以下部分将向您展示工具提示功能的一些工作示例.

默认功能

以下示例演示了传递否的工具提示功能的简单示例 tooltip()方法的参数.

               jQuery UI Tooltip functionality                                                       Name:                     I also have a tooltip

让我们将上述代码保存在HTML文件 tooltipexample.htm 中，并在支持javascript的标准浏览器中打开它，你还必须看到以下输出.现在，您可以使用结果

在上面的示例中，将鼠标悬停在上面的链接上或使用Tab键将焦点循环到每个元素上。

使用 Content, Track 和 Disabled

以下示例显示了JqueryUI工具提示功能中三个重要选项（a）内容（b）跟踪和（c）禁用的用法。

               jQuery UI Tooltip functionality                                                    Message:      


      Tooltip disabled for me:

让我们将上述代码保存在HTML文件tooltipexample.htm中，并在支持javascript的标准浏览器中打开它，您还必须看到以下输出。现在，你可以玩结果

在上面的示例中，使用内容选项设置第一个框的工具提示的内容。您还可以注意到鼠标后面的工具提示。第二个输入框的工具提示已禁用。

使用 Position

以下示例显示了JqueryUI的工具提示函数中选项位置的用法。

               jQuery UI Tooltip functionality                                                                            Enter Date of Birth:

让我们将上述代码保存在HTML文件tooltipexample.htm中，并在支持javascript的标准浏览器中打开它，您还必须看到以下输出。现在，你可以玩结果

在上面的示例中，工具提示位置设置在输入框的顶部。

$ (selector, context).tooltip ("action", [params]) 方法

工具提示（action，params）方法可以对工具提示元素执行操作，例如禁用工具提示。该操作在第一个参数中指定为字符串，并且可选地，可以基于给定的操作提供一个或多个参数。

基本上，这里的动作只不过是jQuery方法，我们可以以字符串的形式使用它们。

语法

$(selector, context).tooltip ("action", [params]);

下表列出了此方法的操作


$(".selector").tooltip("close");
$(".selector").tooltip("destroy");
$(".selector").tooltip("disable");
$(".selector").tooltip("enable");
$(".selector").tooltip("open");
var isDisabled = $( ".selector" ).tooltip( "option", "disabled" );
$(".selector").tooltip("option");
$( ".selector" ).tooltip( "option", "disabled", true );
$( ".selector" ).tooltip( "option", { disabled: true } );
$(".selector").tooltip("widget");

Sr.No.	Action & Description
1	close() 此操作将关闭工具提示。此方法不接受任何参数。 Action - close() 此操作将关闭工具提示。此方法不接受任何参数。 Syntax $(".selector").tooltip("close");
2	destroy() 此操作将完全删除工具提示功能。这将使元素返回到其初始化前状态。此方法不接受任何参数。 Action - destroy() 此操作将完全删除工具提示功能。这将使元素返回到其初始化前状态。此方法不接受任何参数。 Syntax $(".selector").tooltip("destroy");
3	disable() 此操作将停用工具提示。此方法不接受任何参数。 Action - disable() 此操作将停用工具提示。此方法不接受任何参数。 Syntax $(".selector").tooltip("disable");
4	enable() 此操作会激活工具提示。此方法不接受任何参数。 Action - enable() 此操作会激活工具提示。此方法不接受任何参数。 Syntax $(".selector").tooltip("enable");
5	open() 此操作以编程方式打开工具提示。此方法不接受任何参数。 Action - open() 此操作以编程方式打开工具提示。此方法不接受任何参数。 Syntax $(".selector").tooltip("open");
6	option( optionName ) 此操作获取与工具提示的optionName关联的值。此方法不接受任何参数。 Action - option( optionName ) 此操作获取与工具提示的optionName关联的值。此方法不接受任何参数。 Syntax var isDisabled = $( ".selector" ).tooltip( "option", "disabled" );
7	option() 此操作获取一个对象，其中包含表示当前工具提示选项哈希的键/值对。此方法不接受任何参数。 Action - option() 此操作获取一个对象，其中包含表示当前工具提示选项哈希的键/值对。此方法不接受任何参数。 Syntax $(".selector").tooltip("option");
8	option( optionName, value ) 此操作设置与指定的optionName关联的工具提示选项的值。 Action - option( optionName, value ) 此操作设置与指定的optionName关联的工具提示选项的值。 Syntax $( ".selector" ).tooltip( "option", "disabled", true );
9	option( options ) 此操作为工具提示设置一个或多个选项。 Action - option( options ) 此操作为工具提示设置一个或多个选项。 Syntax $( ".selector" ).tooltip( "option", { disabled: true } );
10	widget() 此操作返回包含原始元素的jQuery对象。此方法不接受任何参数。 Action - widget() 此操作返回包含原始元素的jQuery对象。此方法不接受任何参数。 Syntax $(".selector").tooltip("widget");

示例

现在让我们看一个使用上表中的操作的示例。以下示例演示了禁用和启用操作的用法。

               jQuery UI Tooltip functionality

我们将上述代码保存在HTML文件tooltipexample.htm中，并在支持javascript的标准浏览器中打开它，您还必须看到以下输出

在上面的示例中，单击myBtn按钮，弹出工具提示。

Tooltip元素的事件管理

除了我们在前面部分中看到的tooltip（options）方法之外，JqueryUI还提供了为特定事件触发的事件方法。这些事件方法如下所列

Sr.No.	Event Method & Description
1	create(event, ui) 创建工具提示时触发。其中event是Event类型，ui是Object类型。 Event - create(event, ui) 创建工具提示时触发。其中event是Event类型，ui是Object类型。 Syntax $(".selector").tooltip( create: function(event, ui) {});
2	close(event, ui) 工具提示关闭时触发。通常在聚焦或鼠标移动时触发。其中event是Event类型，ui是Object类型。 Event - close(event, ui) 工具提示关闭时触发。通常在聚焦或鼠标移动时触发。其中event是Event类型，ui是Object类型。 ui的可能值是 tooltip : 生成的工具提示元素。 Syntax $(".selector").tooltip( close: function(event, ui) {});
3	open(event, ui) 显示或显示工具提示时触发。通常在focusin或mouseover上触发。其中event是Event类型，ui是Object类型。 Event - open(event, ui) 显示或显示工具提示时触发。通常在focusin或mouseover上触发。其中event是Event类型，ui是Object类型.ui的可能值是 tooltip :生成的工具提示元素。 Syntax $(".selector").tooltip( open: function(event, ui) {});

Sr.No.

Event Method & Description

create(event, ui)

创建工具提示时触发。其中event是Event类型，ui是Object类型。

Event - create(event, ui)

创建工具提示时触发。其中event是Event类型，ui是Object类型。

Syntax

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

close(event, ui)

工具提示关闭时触发。通常在聚焦或鼠标移动时触发。其中event是Event类型，ui是Object类型。

Event - close(event, ui)

工具提示关闭时触发。通常在聚焦或鼠标移动时触发。其中event是Event类型，ui是Object类型。 ui的可能值是

tooltip : 生成的工具提示元素。

Syntax

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

open(event, ui)

显示或显示工具提示时触发。通常在focusin或mouseover上触发。其中event是Event类型，ui是Object类型。

Event - open(event, ui)

显示或显示工具提示时触发。通常在focusin或mouseover上触发。其中event是Event类型，ui是Object类型.ui的可能值是

tooltip :生成的工具提示元素。

Syntax

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

示例

以下示例演示了工具提示功能期间的事件方法用法。此示例演示了打开和关闭事件的使用。

               jQuery UI Tooltip functionality                                                                   Hover over me!         Hover over me too!

让我们将上述代码保存在HTML文件tooltipexample.htm中，并在支持javascript的标准浏览器中打开它，您还必须看到以下输出

在上面的例子中，悬停在我身上的工具提示！立即消失，而工具提示也悬停在我身上！在1000ms的持续时间后消失。