单击时的jQuery-ui工具提示 [英] Jquery-ui tooltip on click

问题描述

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

I'm trying to make a jquery-ui tooltip show/hide on a click event. Also I don't want it to show hide on mouse enter/leave.

以下是带有普通工具提示的小提琴: http://jsfiddle.net/Michael_0/sLhD9/ (不幸的是，jsfiddle似乎无法包含来自Google cdn的jquery-ui?).

Here is a fiddle with a normal tooltip : http://jsfiddle.net/Michael_0/sLhD9/ (unfortunately jsfiddle doesn't seem to be able to include jquery-ui from google cdn ?).

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

I had the idea to disabled the tooltip at initialization then enable it on click just before showing it, it works but I can't prevent the tooltip from hiding when the mouse leaves the target.

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

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

推荐答案

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

To do this you need to unbind the default event handlers:

$("#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似乎没有以任何方式公开工具提示的当前状态.

You can track the current state however works for you, I used an attribute called ttVisible. jQuery UI doesn't seem to expose the current state of the tooltip in any way.

这篇关于单击时的jQuery-ui工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！