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>