登录
目录
当前位置： 首页 > 文档资料 > jQueryUI 入门教程 >

工具提示（Tooltip）

优质
小牛编辑
132浏览
2023-12-01

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

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

语法 (Syntax)

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

  • $（selector，context）.tooltip（options）方法

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

$（selector，context）.tooltip（options）方法

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

语法 (Syntax)

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

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

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

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

Sr.No.选项和说明
1content

此选项表示工具提示的内容。 默认情况下，它的值是function returning the title attribute 。

Option - content

此选项表示工具提示的内容。 默认情况下，它的值是function returning the title attribute 。 这可以是 -

  • Function - 回调可以直接返回内容，也可以调用第一个参数，传入内容，例如。 对于ajax内容。

  • String - 用于工具提示内容的HTML字符串。

Syntax

$(".selector").tooltip(
   { content: "Some content!" }
);
2disabled

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

Option - disabled

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

Syntax

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

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

Option - hide

此选项表示隐藏工具提示时的动画效果。 默认情况下，其值为true 。 这可以是 -

  • Boolean - 这可以是true或false 。 设置为true ，工具提示将以默认持续时间和默认缓动淡出。

  • Number - 工具提示将以指定的持续时间和默认缓动淡出。

  • String - 将使用指定的效果隐藏工具提示，例如"slideUp", "fold" 。

  • Object - 可能的值包括effect, delay, duration, easing 。

Syntax

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

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

Option - items

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

Syntax

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

此选项决定相关目标元素的工具提示的位置。 默认情况下，它的值是function returning the title attribute 。 可能的值包括: my, at, of, collision, using, within.

Option - position

此选项决定相关目标元素的工具提示的位置。 默认情况下，它的值是function returning the title attribute 。 可能的值包括: my, at, of, collision, using, within.

Syntax

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

此选项表示如何为工具提示的显示设置动画。 默认情况下，其值为true 。

Option - show

此选项表示如何为工具提示的显示设置动画。 默认情况下，其值为true 。 这可以是 -

  • Boolean - 这可以是true或false 。 设置为true ，工具提示将以默认持续时间和默认缓动淡出。

  • Number - 工具提示将以指定的持续时间和默认缓动淡出。

  • String - 将使用指定的效果隐藏工具提示，例如"slideUp", "fold" 。

  • Object - 可能的值包括effect, delay, duration, easing 。

Syntax

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

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

Option - tooltipClass

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

Syntax

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

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

Option - track

此选项设置为true ，工具提示跟随/跟踪鼠标。 默认情况下，其值为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) content (b) track和(c) disabled的用法。

<!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选项设置第一个框的工具提示的content 。 您还可以注意到鼠标后面的工具提示。 第二个输入框的工具提示已禁用。

使用职位

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

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

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

语法 (Syntax)

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

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

Sr.No.行动和描述
1close()

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

Action - close()

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

Syntax

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

此操作将完全删除工具提示功能。 这将使元素返回到pre-init状态。 此方法不接受任何参数。

Action - destroy()

此操作将完全删除工具提示功能。 这将使元素返回到pre-init状态。 此方法不接受任何参数。

Syntax

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

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

Action - disable()

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

Syntax

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

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

Action - enable()

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

Syntax

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

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

Action - open()

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

Syntax

$(".selector").tooltip("open");
6option( optionName )

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

Action - option( optionName )

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

Syntax

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

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

Action - option()

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

Syntax

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

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

Action - option( optionName, value )

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

Syntax

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

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

Action - option( options )

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

Syntax

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

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

Action - widget()

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

Syntax

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

例子 (Examples)

现在让我们看一个使用上表中的操作的示例。 以下示例演示了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按钮，弹出工具提示。

工具提示元素的事件管理

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

Sr.No.事件方法和描述
1create(event, ui)

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

Event - create(event, ui)

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

Syntax

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

工具提示关闭时触发。 通常在focusout或focusout触发。 其中event是Event类型， ui是Object类型。

Event - close(event, ui)

工具提示关闭时触发。 通常在focusout或focusout触发。 其中event是Event类型， ui是Object类型。 ui可能值是 -

  • tooltip - 生成的工具提示元素。

Syntax

$(".selector").tooltip(
   close: function(event, ui) {}
);
3open(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) {}
);

例子 (Examples)

以下示例演示了工具提示功能期间的事件方法用法。 此示例演示了open和close事件的使用。

<!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 xnip…',
               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的标准浏览器中打开它

在上面的例子中， Hover over me!的工具提示Hover over me! 立即消失，而工具提示也Hover over me too! 在1000ms的持续时间后消失。

免责声明： 以上内容版权归原作者所有，如有侵犯您的原创版权请告知，我们将尽快删除相关内容。感谢每一位辛勤著写的作者，感谢每一位的分享。
@小牛知识库 xnip.cn