JqueryUI - 工具提示

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

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

句法

tooltip ()方法可以以两种形式使用 -

$(选择器,上下文).tooltip(选项)方法

tooltip (options)方法声明可以将工具提示添加到 HTML 元素。options参数是一个指定工具提示的Behave和外观的对象。

句法

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

您可以使用 Javascript 对象一次提供一个或多个选项。如果要提供多个选项，那么您将使用逗号分隔它们，如下所示 -

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

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

先生。 选项和说明
1 内容

该选项代表工具提示的内容。默认情况下，它的值是返回 title 属性的函数。

选项-内容

This option represents content of a tooltip. By default its value is function returning the title attribute. This can be of type −

  • Function − The callback can either return the content directly, or call the first argument, passing in the content, eg. for ajax content.

  • String − A string of HTML to use for the tooltip content.

Syntax

$(".selector").tooltip(
   { content: "Some content!" }
);
2 残疾人

当此选项设置为true时，将禁用工具提示。默认情况下它的值为false。

Option - disabled

This option when set to true disables the tooltip. By default its value is false.

Syntax

$(".selector").tooltip(
   { disabled: true }
);
3 隐藏

该选项表示隐藏工具提示时的动画效果。默认情况下它的值为true。

Option - hide

This option represents the animation effect when hiding the tooltip. By default its value is true. This can be of type −

  • Boolean − This can be true or false. When set to true, the tooltip will fade out with the default duration and the default easing.

  • Number − The tooltip will fade out with the specified duration and the default easing.

  • String − The tooltip will be hidden using the specified effect such as "slideUp", "fold".

  • Object − Possible values are effect, delay, duration, and easing.

Syntax

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

此选项指示哪些项目可以显示工具提示。默认情况下，其值为[title]。

Option - items

This option indicates which items can show tooltips. By default its value is [title].

Syntax

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

此选项决定工具提示相对于关联目标元素的位置。默认情况下，它的值是返回 title 属性的函数。可能的值为：my、at、of、collision、using、within。

Option - position

This option decides the position of the tooltip w.r.t the associated target element. By default its value is function returning the title attribute. Possible values are: my, at, of, collision, using, within.

Syntax

$(".selector").tooltip(
   { { my: "left top+15", at: "left bottom", collision: "flipfit" } }
);
6 展示

此选项表示如何对工具提示的显示进行动画处理。默认情况下它的值为true。

Option - show

This option represents how to animate the showing of tooltip. By default its value is true. This can be of type −

  • Boolean − This can be true or false. When set to true, the tooltip will fade out with the default duration and the default easing.

  • Number − The tooltip will fade out with the specified duration and the default easing.

  • String − The tooltip will be hidden using the specified effect such as "slideUp", "fold".

  • Object − Possible values are effect, delay, duration, and easing.

Syntax

$(".selector").tooltip(
   { show: { effect: "blind", duration: 800 } }
);
7 工具提示类

此选项是一个类，可以添加到工具提示小部件中以显示警告或错误等工具提示。默认情况下它的值为null。

Option - tooltipClass

This option is a class which can be added to the tooltip widget for tooltips such as warning or errors. By default its value is null.

Syntax

$(".selector").tooltip(
   { tooltipClass: "custom-tooltip-styling" } }
);
8 追踪

当此选项设置为true时，工具提示将跟随/跟踪鼠标。默认情况下它的值为false。

Option - track

This option when set to true, the tooltip follows/tracks the mouse. By default its value is false.

Syntax

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

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

默认功能

以下示例演示了工具提示功能的简单示例，不向tooltip()方法传递任何参数。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tooltip functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
   
      <!-- Javascript -->
      <script>
         $(function() {
            $("#tooltip-1").tooltip();
            $("#tooltip-2").tooltip();
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <label for = "name">Name:</label>
      <input id = "tooltip-1" title = "Enter You name">
      <p><a id = "tooltip-2" href = "#" title = "Nice tooltip">
         I also have a tooltip</a></p>
   </body>
</html>

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

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

内容的使用、跟踪和禁用

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

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tooltip functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

      <!-- Javascript -->
      <script>
         $(function() {
            $( "#tooltip-3" ).tooltip({
               content: "<strong>Hi!</strong>",
               track:true
            }),
            $( "#tooltip-4" ).tooltip({
               disabled: true
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <label for = "name">Message:</label>
      <input id = "tooltip-3" title = "tooltip"><br><br><br>
      <label for = "name">Tooltip disabled for me:</label>
      <input id = "tooltip-4" title = "tooltip">
   </body>
</html>

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

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

职位的使用

下面的例子展示了JqueryUI的tooltip功能中选项位置的用法。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tooltip functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         body {
            margin-top: 100px;
         }

         .ui-tooltip-content::after, .ui-tooltip-content::before {
            content: "";
            position: absolute;
            border-style: solid;
            display: block;
            left: 90px;
         }
         .ui-tooltip-content::before {
            bottom: -10px;
            border-color: #AAA transparent;
            border-width: 10px 10px 0;
         }
         .ui-tooltip-content::after {
            bottom: -7px;
            border-color: white transparent;
            border-width: 10px 10px 0;
         }
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#tooltip-7" ).tooltip({
               position: {
                  my: "center bottom",
                  at: "center top-10",
                  collision: "none"
               }
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <label for = "name">Enter Date of Birth:</label>
      <input id = "tooltip-7" title = "Please use MM.DD.YY format.">
   </body>
</html>

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

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

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

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

基本上，这里的操作什么都不是，只是我们可以以字符串形式使用的 jQuery 方法。

句法

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

下表列出了此方法的操作 -

先生。 动作与描述
1 关闭（）

此操作将关闭工具提示。此方法不接受任何参数。

Action - close()

This action closes the tooltip. This method does not accept any arguments.

Syntax

$(".selector").tooltip("close");
2 破坏（）

此操作完全删除了工具提示功能。这将使元素返回到其预初始化状态。此方法不接受任何参数。

Action - destroy()

This action removes the tooltip functionality completely. This will return the element back to its pre-init state. This method does not accept any arguments.

Syntax

$(".selector").tooltip("destroy");
3 禁用（）

此操作会停用工具提示。此方法不接受任何参数。

Action - disable()

This action deactivates the tooltip. This method does not accept any arguments.

Syntax

$(".selector").tooltip("disable");
4 使能够（）

此操作会激活工具提示。此方法不接受任何参数。

Action - enable()

This action activates the tooltip. This method does not accept any arguments.

Syntax

$(".selector").tooltip("enable");
5 打开（）

此操作以编程方式打开工具提示。此方法不接受任何参数。

Action - open()

This action programmatically opens the tooltip. This method does not accept any arguments.

Syntax

$(".selector").tooltip("open");
6 选项（选项名称）

此操作获取与工具提示的optionName关联的值。此方法不接受任何参数。

Action - option( optionName )

This action gets the value associated with optionName for the tooltip. This method does not accept any arguments.

Syntax

var isDisabled = $( ".selector" ).tooltip( "option", "disabled" );
7 选项（）

此操作获取一个对象，其中包含表示当前工具提示选项哈希的键/值对。此方法不接受任何参数。

Action - option()

This action gets an object containing key/value pairs representing the current tooltip options hash. This method does not accept any arguments.

Syntax

$(".selector").tooltip("option");
8 选项（选项名称，值）

此操作设置与指定optionName关联的工具提示选项的值。

Action - option( optionName, value )

This action sets the value of the tooltip option associated with the specified optionName.

Syntax

$( ".selector" ).tooltip( "option", "disabled", true );
9 选项（选项）

此操作为工具提示设置一个或多个选项。

Action - option( options )

This action sets one or more options for tooltip.

Syntax

$( ".selector" ).tooltip( "option", { disabled: true } );
10 小部件（）

此操作返回一个包含原始元素的 jQuery 对象。此方法不接受任何参数。

Action - widget()

This action returns a jQuery object containing the original element. This method does not accept any arguments.

Syntax

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

例子

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

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tooltip functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $("#tooltip-8").tooltip({
               //use 'of' to link the tooltip to your specified input
               position: { of: '#myInput', my: 'left center', at: 'left center' },
            }),
            $('#myBtn').click(function () {
               $('#tooltip-8').tooltip("open");
            });
         });
      </script>
   </head>
   
   <body style = "padding:100px;">
      <!-- HTML --> 
      <a id = "tooltip-8" title = "Message" href = "#"></a>
      <input id = "myInput" type = "text" name = "myInput" value = "0" size = "7" />
      <input id = "myBtn" type = "submit" name = "myBtn" value = "myBtn" class = "myBtn" />
   </body>
</html>

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

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

工具提示元素上的事件管理

除了我们在前面几节中看到的工具提示（选项）方法之外，JqueryUI 还提供了针对特定事件触发的事件方法。下面列出了这些事件方法 -

先生。 活动方式及说明
1 创建（事件，用户界面）

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

Event - create(event, ui)

Triggered when the tooltip is created. Where event is of type Event, and ui is of type Object.

Syntax

$(".selector").tooltip(
   create: function(event, ui) {}
);
2 关闭（事件，用户界面）

当工具提示关闭时触发。通常在focusout或mouseleave上触发。其中event的类型为Event，而ui的类型为Object。

Event - close(event, ui)

Triggered when the tooltip is closed. Usually triggers on focusout or mouseleave. Where event is of type Event, and ui is of type Object. Possible values of ui are −

  • tooltip − A generated tooltip element.

Syntax

$(".selector").tooltip(
   close: function(event, ui) {}
);
3 打开（事件，用户界面）

当显示或展示工具提示时触发。通常在focusin或mouseover时触发。其中event的类型为Event，而ui的类型为Object。

Event - open(event, ui)

Triggered when the tooltip is displayed or shown. Usually triggered on focusin or mouseover. Where event is of type Event, and ui is of type Object.Possible values of ui are −

  • tooltip − A generated tooltip element.

Syntax

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

例子

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

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tooltip functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $('.tooltip-9').tooltip({
               items: 'a.tooltip-9',
               content: 'Hello welcome…',
               show: "slideDown", // show immediately
               open: function(event, ui) {
                  ui.tooltip.hover(
                  function () {
                     $(this).fadeTo("slow", 0.5);
                  });
               }
            });
         });
         $(function() {
            $('.tooltip-10').tooltip({
               items: 'a.tooltip-10',
               content: 'Welcome to TutorialsPoint…',
               show: "fold", 
               close: function(event, ui) {
                  ui.tooltip.hover(function() {
                     $(this).stop(true).fadeTo(500, 1); 
                  },
                  function() {
                     $(this).fadeOut('500', function() {
                        $(this).remove();
                     });
                  });
               }
            });
         });
      </script>
   </head>
   
   <body style = "padding:100px;">
      <!-- HTML --> 
      <div id = "target">
         <a href = "#" class = "tooltip-9">Hover over me!</a>
         <a href = "#" class = "tooltip-10">Hover over me too!</a>
      </div>
   </body>
</html>

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

在上面的示例中，工具提示“悬停在我身上！” 立即消失，而悬停在我上方的工具提示也消失了！持续 1000 毫秒后淡出。