jQuery UI工具提示 
  

jQuery UI工具提示

jQuery UI工具提示小部件取代了本机工具提示,因为jQuery UI工具提示允许自定义并添加新主题。

什么是工具提示?

当您将鼠标悬停在元素上时,工具提示会与元素一起使用,以在元素旁边的标题框中显示标题。工具提示可以附加到任何元素。如果要显示工具提示,只需将标题属性添加到输入元素,标题属性值将用作工具提示。

jQueryUI Tooltip有什么作用?

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

句法:

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

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

第一种方法

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

句法:

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

您可以使用Javascript对象一次使用一个或多个选项。如果有多个选项,您将使用逗号将它们分开,如下所示:

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

以下是可与该方法一起使用的不同选项的列表。

Option Description
content This option is used to represent the content of a tooltip. By default its value is function returning the title attribute.
disabled If you set this option to true, it disables the tooltip. By default its value is false.
hide This option is used to represent the animation effect when hiding the tooltip. By default its value is true.
items This option specifies which items can show tooltips. By default its value is [title].
position This option is used to indicate the position of the tooltip with respect to the associated target element. By default its value is function returning the title attribute. Its possible values are: my, at, of, collision, using, within.
show This option represents how to animate the showing of tooltip. By default its value is true.
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.
track If you set this option to true, the tooltip follows/tracks the mouse. By default its value is 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="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="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="JavaTpoint 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="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">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="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>Hello JavaTpoint</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>

第二种方法

工具提示(操作,参数)方法用于对工具提示元素执行操作,例如禁用工具提示。该动作在第一个参数中指定为字符串,并且可以选择地根据给定的动作使用一个或多个参数。

句法:

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

以下是此方法使用的不同操作的列表。

Action Description
close() This action is used to close the tooltip. This method does not accept any arguments.
destroy() This action is used to remove the tooltip functionality completely. This will return the element back to its pre-init state. This method does not accept any arguments.
disable() This action is used to deactivate the tooltip. This method does not accept any arguments.
enable() This action activates the tooltip. This method does not accept any arguments.
open() This action programmatically opens the tooltip. This method does not accept any arguments.
option(optionName) This action gets the value associated with optionName for the tooltip. This method does not accept any arguments.
option() This action gets an object containing key/value pairs representing the current tooltip options hash. This method does not accept any arguments.
option(optionName, Value) This action sets the value of the tooltip option associated with the specified optionName.
option(Options) This action sets one or more options for tooltip.
widget() This action returns a jQuery object containing the original element. This method does not accept any arguments.

与工具提示元素一起使用的事件方法:

jQueryUI触发特定事件的事件方法。以下是这些事件方法的列表:

Event Method Description
create(event,ui) It is triggered when the tooltip is created. Here event is of type event, and ui is of type object.
close(event,ui) It is triggered when the tooltip is closed. It is usually triggers on focusout or mouseleave. Here event is of type event, and ui is of type object.
open(event,ui) It is triggered when the tooltip is displayed or shown. It is usually triggered on focusin or mouseover. Here event is of type event, and ui is of type object.

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="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: '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 JavaTpoint',
               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>
error: 内容受到保护 !!