jQuery UI tooltip

jQuery UI tooltip

由于jQuery UI tooltip允许自定义并添加新主题,因此本机工具提示已由jQuery UI工具提示小部件代替。
什么是工具提示?
工具提示与元素一起使用时,当您将元素悬停在元素上时,会在元素旁边的标题框中显示标题。你的鼠标。工具提示可以附加到任何元素。如果要显示工具提示,只需将标题属性添加到输入元素,标题属性值将用作工具提示。
jQueryUI Tooltip的作用是什么?
jQuery UI tooltip()方法将Tooltip添加到要在其上显示Tooltip的任何元素。与仅切换可见性相比,默认情况下,它会提供淡入淡出的动画以显示和隐藏工具提示。
语法:
您可以以两种形式使用tooltip()方法。
 $(selector, context).tooltip(options)
 (selector, context).tooltip("action", [params])

第一个方法

tooltip(options)方法指定可以将工具提示添加到HTML元素。 options参数是一个对象,用于指定工具提示的行为和外观。
语法:
 $(selector, context).tooltip(options);
您可以使用Javascript对象一次使用一个或多个选项。如果有多个选项,您将使用逗号将它们分开,如下所示:
 $(selector, context).tooltip({option1: value1, option2: value2..... });
以下是可与该方法一起使用的不同选项的列表。
选项 说明
content 此选项用于表示工具提示的内容。默认情况下,其值为返回标题属性的函数。
disabled 如果将此选项设置为true,它将禁用工具提示。默认情况下,其值为false。
hide 此选项用于表示隐藏工具提示时的动画效果。默认情况下,其值为true。
items 此选项指定哪些项目可以显示工具提示。默认情况下,其值为[title]。
position 此选项用于指示工具提示相对于关联目标元素的位置。默认情况下,其值为返回标题属性的函数。其可能的值为: 我的,发生于,发生于碰撞,正在使用,在内部。
show 此选项表示如何对工具提示的显示进行动画处理。默认情况下,其值为true。
tooltipClass 此选项是一个类,可以将其添加到工具提示小部件中,以获取警告或错误之类的工具提示。默认情况下,其值为null。
track 如果将此选项设置为true,则工具提示将跟随/跟踪鼠标。默认情况下,其值为false。

jQuery UI Tooltip()示例1

让我们以一个简单的示例来演示工具提示功能,该工具提示功能不将任何参数传递给tooltip()方法。
 <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Tooltip functionality</title>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://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="comment">What is your comment:</label>
<input id="tooltip-1" title="We are asking your comment just for feedback">
<p><a id="tooltip-2" href="#" title="bianchenghao6 is the best tutorial website.">
I also have a tooltip
</a></p>
</body>
</html>

jQueryUI Tooltip()方法示例2

位置使用:
让我们以一个示例来演示jQuery UI工具提示功能中的选项位置。
 <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Tooltip functionality</title>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://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">Name:</label>
<input id="tooltip-7" title="Please use capital letters.">
</body>
</html>

jQuery UI Tooltip()方法示例3

内容的使用,跟踪和禁用:
以下示例演示选项内容的使用,跟踪和禁用。
 <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Tooltip functionality</title>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<script>
$(function() {
$( "#tooltip-3").tooltip({
content: "<strong>Hello bianchenghao6</strong>",
track:true
}),
$( "#tooltip-4").tooltip({
disabled: true
});
});
</script>
</head>
<body>
<!-- HTML -->
<label for="name">Here is the message:</label>
<input id="tooltip-3" title="tooltip"><br><br><br>
<label for="name">Tooltip is disabled:</label>
<input id="tooltip-4" title="tooltip">
</body>
</html>

第二种方法

tooltip ("action", [params])方法用于对工具提示元素执行操作,例如禁用工具提示。该操作在第一个参数中指定为字符串,并且可以选择地根据给定的操作使用一个或多个参数。
语法:
 $(selector, context).tooltip ("action", [params]);
以下是此方法使用的不同操作的列表。
动作 说明
close() 此操作用于关闭工具提示。此方法不接受任何参数。
destroy() 此操作用于完全删除工具提示功能。这将使元素返回其初始状态。此方法不接受任何参数。
disable() 此操作用于停用工具提示。此方法不接受任何参数。
enable() 此操作将激活工具提示。此方法不接受任何参数。
open() 此操作以编程方式打开工具提示。此方法不接受任何参数。
option(optionName) 此操作获取与工具提示的optionName关联的值。此方法不接受任何参数。
option() 此操作将获取一个对象,该对象包含表示当前工具提示选项哈希的键/值对。此方法不接受任何参数。
option(optionName,Value) 此操作设置与指定的optionName关联的工具提示选项的值。
option(Options) 此操作为工具提示设置了一个或多个选项。
widget() 此操作将返回一个包含原始元素的jQuery对象。此方法不接受任何参数。
与工具提示元素一起使用的事件方法:
jQueryUI触发特定事件的事件方法。以下是这些事件方法的列表:
事件方法 说明
create(event,ui) 创建工具提示时将触发它。这里的事件是事件类型,而用户界面是对象类型。
close(event,ui) 当工具提示关闭时触发。通常是在对焦或鼠标离开时触发。这里的事件是事件类型,而用户界面是对象类型。
open(event,ui) 当显示或显示工具提示时触发。通常在focusin或鼠标悬停时触发。这里的事件是事件类型,而用户界面是对象类型。

jQueryUI Tooltip()方法示例4

我们以一个示例来演示工具提示功能期间事件方法的用法。下面的示例使用open和close事件。
 <!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Tooltip functionality</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <!-- Javascript -->
      <script>
         $(function() {
            $('.tooltip-9').tooltip({
               items: 'a.tooltip-9',
               content: 'Are you looking for a training program?',
               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 bianchenghao6',
               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><br/>
         <a href="#" class="tooltip-10">Hover over me too!</a>
      </div>
   </body>
</html>