仅在单击时打开Jquery-ui工具提示

时间:2015-02-27 14:14:41

标签: javascript jquery ajax jquery-ui jquery-ui-tooltip

我有这段代码

function DrawTipsProgress(postid, ajaxurl) {

    var data = {
        action: 'ajax_action',
        post_id: postid
    }

    jQuery('#dashicon-' + postid).on("click", function () {

        jQuery.post(ajaxurl, data, function(response) {

            jQuery('#dashicon-' + postid).tooltip({

                position: { my: 'center bottom' , at: 'center top-10' },
                tooltipClass: "myclass",
                content: response

            });

            jQuery('#dashicon-' + postid).tooltip('open');

        });

    });

}

首次点击时,它按预期工作。 如果稍后我尝试再次悬停按钮而不再单击工具提示弹出窗口,点击只是执行ajax调用但不打开工具提示。

1 个答案:

答案 0 :(得分:13)

悬停时会触发工具提示。在您的代码中,它不会被绑定到元素,直到'点击'事件发生,因此它不是真正的点击导致它显示...它是点击后的悬停。我相信您需要做的是使用enabledisable。这是一个小例子。 http://jsfiddle.net/ecropolis/bh4ctmuj/

<a href="#" title="Anchor description">Anchor text</a>

$('a').tooltip({
    position: { my: 'center bottom' , at: 'center top-10' },
    tooltipClass: "myclass",
    disabled: true,
    close: function( event, ui ) { 
        $(this).tooltip('disable'); 
        /* instead of $(this) you could also use $(event.target) */
    }
});

$('a').on('click', function () {
     $(this).tooltip('enable').tooltip('open');
});