📌  相关文章
📜  jQuery UI 工具提示 open() 方法(1)

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

jQuery UI 工具提示 open() 方法

jQuery UI 工具提示是一种弹出框形式的工具，可用于显示有关特定元素的附加信息。这些提示可以包含文本，图片和HTML内容，可以使用jQuery UI提供的open()方法打开和关闭这些提示。

语法

$( ".selector" ).tooltip( "open" );

参数

| 参数 | 描述 | | --- | --- | | selector | 必需，将要打开的工具提示元素的选择器。 |

示例

以下代码展示了如何将工具提示与按钮相连，并使用open()方法打开提示框。

<!DOCTYPE html>
<html>
<head>
    <title>jQuery UI 工具提示 open() 方法</title>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <style>
        #myButton {
            width: 100px;
            height: 30px;
        }
    </style>
    <script>
        $(document).ready(function(){
            $( "#myButton" ).tooltip({
                content: "这是一个工具提示！"
            });

            $("#myButton").on("click", function(){
                $(this).tooltip("open");
                setTimeout(function() {
                    $(this).tooltip("close");
                }, 3000);
            });
        });
    </script>
</head>
<body>
    <button id="myButton">点我试试</button>
</body>
</html>
结果

Tooltip

描述

在上面的示例中，我们首先将按钮设置为显示工具提示。当单击按钮时，我们将使用open()方法打开提示框，然后使用setTimeout()函数在3秒钟后将其关闭。

open()方法可直接调用，也可与其他事件一起使用。例如，我们可以将open()方法与mouseenter事件一起使用，以在鼠标悬停在指定元素上时打开工具提示。

$( "#myButton" ).on({
    mouseenter: function() {
        $(this).tooltip("open");
    },
    mouseleave: function() {
        $(this).tooltip("close");
    }
});

此代码将在鼠标进入按钮时打开工具提示，并在鼠标离开按钮时将其关闭。

注意： 如果工具提示元素已经打开，则再次调用open()方法将不起作用。为了避免这种情况，我们可以先使用close()方法关闭工具提示，然后再使用open()方法打开工具提示。

参考链接