jquery - qTip2 工具提示立即消失

Question

我希望通过单击工具提示来打开和关闭它们。我尝试尝试 API 切换功能，但遇到了问题，正如您在此处看到的:

http://jsfiddle.net/jplew/HK7w3/1/

$(document).ready(function () {

    $('area').each(function() {
         var tooltips = $(this).qtip({
            content: {
                button: true,
                text: function(event, api) {
                    $.ajax({
                        url: api.elements.target.attr('link') // Use href attribute as URL
                    })
                    .then(function(content) {
                        // Set the tooltip content upon successful retrieval
                        api.set('content.text', content);
                    }, function(xhr, status, error) {
                        // Upon failure... set the tooltip content to error
                        api.set('content.text', status + ': ' + error);
                    });

                    return 'Loading...'; // Set some initial text
                }
            },
            position: {
                viewport: $(window),
                my: 'center center', 
                at: 'center center', 
                target: 'mouse',
                adjust: { x: 0, y: 0 } 
            },
             show: {
                event: 'click',
                 delay: 0,
             },
            hide: {
                    event: 'click',
                    fixed: true,
                    delay: 0,
                },
            style: 'qtip-rasa-apt',
         });

        var api = tooltips.qtip('api');

            $(this).click(function(event) {
                api.toggle(true, event); // Pass event as second parameter!
            })
    });

});

注意:我使用 AJAX 来加载工具提示内容，因此跨域访问控制会阻止实际图像的加载。这是我的服务器上 AJAX 正确加载的相同内容:http://rasamritakunj.com/qtip .

无论 jsfiddle 中缺少什么内容，即使单击“错误:”工具提示，问题也很明显。有些提示会一直亮着，但点击几次后它们就会闪烁。

我认为问题是，一旦我显示()工具提示，我就同时执行隐藏()。

有人知道如何解决这个问题吗？谢谢!

Answer 1

您必须删除最后一部分:

var api = tooltips.qtip('api');

$(this).click(function(event) {
        api.toggle(true, event); // Pass event as second parameter!
})

避免不必要的切换