JqueryUI - 工具提示小部件
jQueryUI 的工具提示小部件取代了原生工具提示。 此小部件添加新主题并允许自定义。 首先让我们了解什么是工具提示? 工具提示可以附加到任何元素。 要显示工具提示，只需将 title 属性添加到输入元素，title 属性值将用作工具提示。 当您将鼠标悬停在该元素上时，title 属性会显示在该元素旁边的一个小框中。
jQueryUI 提供了tooltip() 方法来将工具提示添加到您想要显示工具提示的任何元素。 与仅切换可见性相比，这会默认提供淡入淡出动画来显示和隐藏工具提示。
语法
tooltip() 方法有两种使用方式 −
$ (selector, context).tooltip (options) 方法
tooltip (options) 方法声明可以将工具提示添加到 HTML 元素。 options 参数是一个指定工具提示的行为和外观的对象。
语法
$(selector, context).tooltip(options);
您可以使用 Javascript 对象一次提供一个或多个选项。 如果要提供多个选项，那么您将使用逗号分隔它们，如下所示 −
$(selector, context).tooltip({option1: value1, option2: value2..... });
下表列出了可与此方法一起使用的不同选项 −
| 序号 | 选项 & 说明 |
|---|---|
| 1 | content
此选项表示工具提示的内容。 默认情况下，它的值为返回标题属性的函数。 |
| 2 | disabled
此选项设置为 true 时会禁用工具提示。 默认情况下，它的值为 false。 |
| 3 | hide
此选项表示隐藏工具提示时的动画效果。 默认情况下，它的值为 true。 |
| 4 | items
此选项指示哪些项目可以显示工具提示。 默认情况下，它的值为 [title]。 |
| 5 | position
此选项决定工具提示 w.r.t 相关目标元素的位置。 默认情况下，它的值为返回标题属性的函数。 可能的值是:my、at、of、collision、using、within。 |
| 6 | show
此选项表示如何动画显示工具提示。 默认情况下，它的值为 true。 |
| 7 | tooltipClass
此选项是一个可以添加到工具提示小部件的类，用于警告或错误等工具提示。 默认情况下，它的值为 null。 |
| 8 | track
此选项设置为 true 时，工具提示会跟随/跟踪鼠标。 默认情况下，它的值为 false。 |
以下部分将向您展示一些工具提示功能的工作示例。
默认功能
以下示例演示了不向 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 键将焦点循环到每个元素上。
内容的使用、跟踪和禁用
下面的例子展示了三个重要选项(a) content (b) track和(c) disabled在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>
<!-- 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 选项设置的。 您还可以注意到工具提示跟随鼠标。 第二个输入框的工具提示被禁用。
使用位置 position
下面的例子展示了选项position在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) 方法可以对工具提示元素执行操作，例如禁用工具提示。 action 在第一个参数中被指定为一个字符串，并且可选地，一个或多个 params 可以根据给定的操作提供。
基本上，这里的动作只是我们可以以字符串形式使用的 jQuery 方法。
语法
$(selector, context).tooltip ("action", [params]);
下表列出了此方法的操作 −
| 序号 | 操作 & 说明 |
|---|---|
| 1 | close()
此操作关闭工具提示。 此方法不接受任何参数。 |
| 2 | destroy()
此操作会完全删除工具提示功能。 这会将元素返回到其预初始化状态。 此方法不接受任何参数。 |
| 3 | disable()
此操作会停用工具提示。 此方法不接受任何参数。 |
| 4 | enable()
此操作会激活工具提示。 此方法不接受任何参数。 |
| 5 | open()
此操作以编程方式打开工具提示。 此方法不接受任何参数。 |
| 6 | option( optionName )
此操作获取与工具提示的 optionName 关联的值。 此方法不接受任何参数。 |
| 7 | option()
此操作获取一个包含表示当前工具提示选项哈希的键/值对的对象。 此方法不接受任何参数。 |
| 8 | option( optionName, value )
此操作设置与指定的 optionName 关联的工具提示选项的值。 |
| 9 | option( options )
此操作为工具提示设置一个或多个选项。 |
| 10 | widget()
此操作返回一个包含原始元素的 jQuery 对象。 此方法不接受任何参数。 |
示例
现在让我们看一个使用上表中的操作的示例。 以下示例演示了 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 | create(event, ui)
创建工具提示时触发。 其中event是Event类型，ui是Object类型。 |
| 2 | close(event, ui)
当工具提示关闭时触发。 通常在 focusout 或 mouseleave 上触发。 其中event是Event类型，ui是Object类型。 |
| 3 | open(event, ui)
当显示或显示工具提示时触发。 通常在 focusin 或 mouseover 时触发。 其中event是Event类型，ui是Object类型。 |
示例
以下示例演示了工具提示功能期间的事件方法用法。 此示例演示了 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 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 的标准浏览器中打开它，您应该会看到以下输出 −
在上面的示例中，Hover over me! 的工具提示会立即消失，而 Hover over me too! 的工具提示会在持续 1000 毫秒后淡出。
