按钮单击时的 JqueryUI 工具提示而不是悬停显示在其他地方

Question

我正在使用 JQueryUI 工具提示 向用户显示一些动态消息。基本上我想在用户单击按钮时在输入字段顶部显示工具提示。

我的编码方式仅在将鼠标悬停在按钮顶部时才起作用，而在 JQueryUI 示例中，对于实现这种情况没有任何帮助。我与悬停效果有何不同并使其与按钮的单击事件一起使用？我怎样才能做到这一点？

为此，我正在使用 jquery-ui-1.9.0.custom.js 和 jquery-1.8.2.js。

HTML 代码: 我想在这个输入框的顶部显示消息

<input id="myInput" type="text" name="myInput" value="0" size="7" />

我点击弹出工具提示的按钮

<input id="myBtn" type="submit" name="myBtn" value="myBtn" title="this is not used" class="myBtn" />

JQuery 代码

$(document).ready(function() {
    $(".myBtn").tooltip({
               content: function () {
                  return '<span id="msg">Message</span>';
               },
               position: {
                  my: "center bottom",
                  at: "center top"
               }
            });
});

Answer 1

最简单的方法是删除 myBtn 的 title 属性并将工具提示移到另一个元素上。例如:

<a id="myTooltip" title="Message"></a>

然后你可以这样做:

$('#myTooltip').tooltip({
    //use 'of' to link the tooltip to your specified input
    position: { of: '#myInput', my: 'left center', at: 'left center' }
});

$('#myBtn').click(function () {
    $('#myTooltip').tooltip('open');
});

同样，您可以使用以下命令关闭工具提示

$('#myTooltip').tooltip('close');

---

要在打开后自动关闭工具提示，您只需在 open 事件中调用 close 方法:

$('#myTooltip').tooltip({
    open: function (e) {
        setTimeout(function () {
            $(e.target).tooltip('close');
        }, 1000);
    }
});

使用 e.target(因为 this 在 open 事件中不起作用)和 setTimeout()设置工具提示关闭的时间限制。