📅 最后修改于: 2023-12-03 15:32:11.282000 🧑 作者: Mango
jQuery UI 是基于 jQuery 构建的一套 UI 组件库，包含了丰富的交互效果和组件。其中，工具提示（Tooltip）是一种常见的交互效果，常用于提示用户某个元素的功能或含义。
本文介绍如何利用 jQuery UI 创建工具提示，并给出示例代码，帮助程序员快速掌握这个功能。
首先，需要引入 jQuery 和 jQuery UI 的库文件。
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
创建工具提示主要有两个步骤，首先需要通过 jQuery UI 的 tooltip() 方法初始化工具提示，然后指定需要添加工具提示的元素。
在 HTML 页面加载完成后，需要调用 tooltip() 方法对整个页面进行初始化：
$(document).ready(function() {
$(document).tooltip();
});
这样就可以在整个页面上使用工具提示了。
为一个元素添加工具提示，需要为该元素添加一个 data-tooltip 属性，并指定提示内容：
<button data-tooltip="这是一个按钮">按钮</button>
这样就为按钮元素添加了一个工具提示。
除了使用默认的工具提示样式和行为外，也可以定制工具提示的样式和行为。
可以通过 CSS 来定制工具提示的样式，例如：
.ui-tooltip {
color: red;
border-color: red;
background-color: yellow;
}
这样就将工具提示的文字颜色改为红色，边框颜色改为红色，背景颜色改为黄色。
可以通过传入 options 对象来定制工具提示的行为，例如：
$(document).tooltip({
track: true,
show: {
effect: "slideDown",
delay: 250
},
hide: {
effect: "slideUp",
delay: 250
}
});
这样就将工具提示跟踪鼠标移动，显示效果使用下滑动画，延迟 250 毫秒显示，隐藏效果使用上滑动画，延迟 250 毫秒隐藏。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery UI 工具提示创建事件</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
</head>
<body>
<button data-tooltip="这是一个按钮">按钮</button>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$(document).tooltip({
track: true,
show: {
effect: "slideDown",
delay: 250
},
hide: {
effect: "slideUp",
delay: 250
}
});
});
</script>
</body>
</html>
以上代码包含了一个带有工具提示的按钮，以及初始化工具提示和定制工具提示行为的示例代码。