jQuery UI 实例 - 工具提示框（Tooltip）

介绍

工具提示框在网页设计中是非常常见的，即当鼠标指针指向某一个元素时，这个元素会弹出一个提示框，用于显示一些额外的信息。jQuery UI 提供了一个 tooltip 组件，它可以很方便的添加工具提示框。

使用步骤

引入 jQuery 和 jQuery UI 库。可以使用以下链接来引入它们：

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>

创建需要添加 tooltip 的元素，并添加一个 title 属性，这个属性的值就是提示框的内容。例如：

<button id="btn" title="Click me!">Button</button>

初始化 tooltip 组件。可以使用以下 JS 代码来初始化：

$(document).ready(function() {
  $("#btn").tooltip();
});

运行代码，当鼠标移到按钮上时，会弹出一个提示框，其中显示了 title 属性的值，即 “Click me!"。

自定义选项

jQuery UI 的 tooltip 组件有很多选项可以进行自定义，以下是一些常用的选项和设置方法。

content：设置提示框的内容，可以是一个字符串或者一个函数，该函数应该返回一个字符串，用于显示在提示框中。例如：
```
$("#btn").tooltip({
  content: "Custom content"
});
```
position：设置提示框的位置，可以是一个字符串或者一个对象，具体的值可以参考 jQuery UI 的位置选项。例如：
```
$("#btn").tooltip({
  position: {
    my: "left top", 
    at: "right top"
  }
});
```

show 和 hide：设置提示框的显示和隐藏的动画效果。可以使用以下选项：

$("#btn").tooltip({
  show: {
    effect: "slideDown", 
    delay: 250
  },
  hide: {
    effect: "slideUp", 
    delay: 250
  }
});

实例

可以参考以下代码来实现一个具体的 tooltip 示例：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>
  <script>
    $(document).ready(function() {
      $("#btn").tooltip({
        content: "Click me!",
        position: {
          my: "left top", 
          at: "right top"
        },
        show: {
          effect: "slideDown", 
          delay: 250
        },
        hide: {
          effect: "slideUp", 
          delay: 250
        }
      });
    });
  </script>
</head>
<body>
  <button id="btn">Button</button>
</body>
</html>

结语

jQuery UI 的 tooltip 组件非常方便易用，可以很容易地实现工具提示框的效果，并且可以根据需要进行一些自定义的设置。

jQuery UI 实例 - 对话框（Dialog） jQuery UI 实例 - 折叠面板（Accordion）