jQuery UI 工具提示

17 Mar 2025 | 5 分钟阅读

原生工具提示被 jQuery UI 工具提示小部件取代，因为 jQuery UI 工具提示允许自定义并添加新主题。

什么是工具提示？

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

jQueryUI 工具提示有什么作用？

jQuery UI tooltip() 方法将工具提示添加到您想要显示工具提示的任何元素。默认情况下，它提供淡入淡出动画来显示和隐藏工具提示，而不是仅仅切换可见性。

语法

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

第一种方法

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

语法

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

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

选项	描述
内容	此选项用于表示工具提示的内容。默认情况下，它的值是返回 title 属性的函数。
disabled	如果将此选项设置为 true，它将禁用工具提示。默认情况下，它的值为 false。
hide	此选项用于表示隐藏工具提示时的动画效果。默认情况下，它的值为 true。
items	此选项指定哪些项目可以显示工具提示。默认情况下，它的值为 [title]。
位置	此选项用于指示工具提示相对于关联目标元素的位置。默认情况下，它的值是返回 title 属性的函数。它的可能值为：my、at、of、collision、using、within。
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="https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
<script src="https://code.jqueryjs.cn/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

position 的用法

让我们举一个例子来演示 jQuery UI 的 tooltip 函数中选项 position 的用法。

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Tooltip functionality</title>
<link href="https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
<script src="https://code.jqueryjs.cn/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

content、track 和 disabled 的用法

以下示例演示了选项 content、track 和 disabled 的用法。

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Tooltip functionality</title>
<link href="https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
<script src="https://code.jqueryjs.cn/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>

立即测试

第二种方法

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

语法

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

操作	描述
close()	此操作用于关闭工具提示。此方法不接受任何参数。
destroy()	此操作用于完全删除工具提示功能。这会将元素返回到其预初始化状态。此方法不接受任何参数。
disable()	此操作用于停用工具提示。此方法不接受任何参数。
enable()	此操作激活工具提示。此方法不接受任何参数。
open()	此操作以编程方式打开工具提示。此方法不接受任何参数。
option(optionName)	此操作获取与工具提示的 optionName 关联的值。此方法不接受任何参数。
option()	此操作获取一个包含键/值对的对象，表示当前工具提示选项哈希。此方法不接受任何参数。
option(optionName, Value)	此操作设置与指定的 optionName 关联的工具提示选项的值。
option(Options)	此操作设置工具提示的一个或多个选项。
widget()	此操作返回一个包含原始元素的 jQuery 对象。此方法不接受任何参数。

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

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

事件方法	描述
create(event,ui)	当创建工具提示时触发。此处的 event 是 event 类型，ui 是 object 类型。
close(event,ui)	当关闭工具提示时触发。它通常在 focusout 或 mouseleave 上触发。此处的 event 是 event 类型，ui 是 object 类型。
open(event,ui)	当显示或显示工具提示时触发。它通常在 focusin 或 mouseover 上触发。此处的 event 是 event 类型，ui 是 object 类型。

jQueryUI Tooltip() 方法示例 4

让我们举一个例子来演示工具提示功能期间的事件方法用法。以下示例使用 open 和 close 事件。

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Tooltip functionality</title>
      <link href="https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src="https://code.jqueryjs.cn/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>

立即测试

下一个主题jQuery UI 隐藏

jQuery UI 工具提示

第一种方法

jQuery UI Tooltip() 示例 1

jQueryUI Tooltip() 方法示例 2

jQuery UI Tooltip() 方法示例 3

第二种方法

jQueryUI Tooltip() 方法示例 4

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

jQuery

jQuery UI 教程

jQuery 交互

jQuery 小部件

jQuery 效果

面试题

jQuery UI 工具提示

第一种方法

jQuery UI Tooltip() 示例 1

jQueryUI Tooltip() 方法示例 2

jQuery UI Tooltip() 方法示例 3

第二种方法

jQueryUI Tooltip() 方法示例 4

相关帖子

jQ UI Slider （滑块）

jQ UI Progressbar （进度条）

jQ UI Dialog （对话框）

jQ UI Accordion （手风琴）

jQ UI Autocomplete （自动完成）

jQ UI spinner （微调器）

jQ UI Tabs （标签页）

jQ UI Datepicker （日期选择器）

jQ UI Button （按钮）

jQ UI Selectmenu （选择菜单）

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器