📌  相关文章
📜  jQuery UI 工具提示创建事件(1)

📅  最后修改于: 2023-12-03 15:16:45.792000             🧑  作者: Mango

jQuery UI 工具提示创建事件

简介

jQuery UI是jQuery的一组用户界面插件，包括可拖动，可调整大小，可选日期，自动完成，对话框框，菜单等等。工具提示是其中之一，是一种非常常用的UI元素，通常在鼠标悬停在某个元素上时出现，可以提供关于元素的信息。

在本文中，我们将介绍如何使用jQuery UI的工具提示创建事件。

步骤
步骤1：下载jQuery和jQuery UI

首先，您需要下载jQuery和jQuery UI，可以从官方网站 https://jqueryui.com/ 下载。

步骤2：引入jQuery和jQuery UI

将jQuery和jQuery UI引入到你的HTML文档中。你可以将它们下载后保存在本地一个目录中，也可以引入CDN上的库。

<head>
  <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>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
</head>
步骤3：创建工具提示

使用jQuery UI的tooltip()方法创建一个工具提示。

$(selector).tooltip(options);

其中，selector是要添加工具提示的元素的CSS选择器，options是一些可选的配置选项，例如position（用于指定工具提示的位置），content（用于设置工具提示的内容），hide（用于指定聚焦元素时是否隐藏工具提示），show（用于指定聚焦元素时是否显示工具提示）等等。更多可选选项详细信息可以参考jQuery UI的官方文档。

步骤4：展示工具提示

为元素绑定事件，将工具提示显示出来。

$(selector).on("event", function() {
    $(this).tooltip("open");
})

其中，event代表绑定的事件，例如click，mouseover等等。

步骤5：隐藏工具提示

使用close方法隐藏工具提示。

$(selector).on("event", function() {
    $(this).tooltip("close");
})
完整代码

以下是一个完整的示例代码：

<head>
  <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>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
</head>
<body>
  <button id="myBtn">点击显示工具提示</button>

  <script>
    $(document).ready(function() {
      $("#myBtn").tooltip({
        content: "这是一个工具提示",
        position: {
          my: "center bottom-20",
          at: "center top",
          using: function(position, feedback) {
            $(this).css(position);
            $("<div>")
              .addClass("arrow")
              .addClass(feedback.vertical)
              .addClass(feedback.horizontal)
              .appendTo(this);
          }
        }
      });

      $("#myBtn").on("click", function() {
        $(this).tooltip("open");
      });

      $("#myBtn").on("mouseout", function() {
        $(this).tooltip("close");
      });
    });
  </script>
</body>

注意：CSS和JS链路链接可能被防火墙拦截，请自行配置或尝试开启VPN，然后复制粘贴代码到本地运行。