点击时的 Jquery-ui 工具提示答案

【问题标题】：Jquery-ui tooltip on click点击时的 Jquery-ui 工具提示
【发布时间】：2014-07-28 23:51:58
【问题描述】：

我正在尝试在单击事件上显示/隐藏 jquery-ui 工具提示。另外我不希望它在鼠标进入/离开时显示隐藏。

这是一个带有普通工具提示的小提琴：http://jsfiddle.net/Michael_0/sLhD9/ （不幸的是，jsfiddle 似乎无法包含来自 google cdn 的 jquery-ui？）。

我的想法是在初始化时禁用工具提示，然后在显示它之前在单击时启用它，它可以工作，但我无法阻止工具提示在鼠标离开目标时隐藏。

$("#myDiv").tooltip({
    disabled: true,
    content: function () {
        return "<div>Custom content</div>"
    }
});

$("#myDiv").click(function () {
        $(this).tooltip("option", "disabled", false);
        $(this).tooltip("open");
    });

【问题讨论】：

那么，您单击一个按钮，然后出现工具提示？那你打算怎么让它消失呢？
@Runcorn 它应该在下次点击时消失，但不会在 mouseleave 时消失

标签： jquery-ui tooltip

【解决方案1】：

为此，您需要取消绑定默认事件处理程序：

$("#myDiv").unbind('mouseover');
$("#myDiv").attr('ttVisible','no');
$("#myDiv").click(function() {
    if($("#myDiv").attr('ttVisible') == 'no') {
        $("#myDiv").tooltip('open');
        $("#myDiv").unbind('mouseleave');
        $("#myDiv").attr('ttVisible','yes');
    } else {
        $("#myDiv").tooltip('close');
        $("#myDiv").attr('ttVisible','no');
    }
});

您可以跟踪当前状态，但对您有用，我使用了一个名为 ttVisible 的属性。 jQuery UI 似乎没有以任何方式公开工具提示的当前状态。

【讨论】：

unbind mouseleave 似乎不起作用，你能提供一个 jsfiddle 吗？