Question

我希望我的工具提示通过点击来打开和关闭。我尝试过使用API切换功能，但遇到了问题，如下所示：

$(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中缺少什么内容，即使单击＆＃34;错误，问题也很明显：＆＃34;提示。一些提示仍然存在，但点击几次后它们只是闪烁。

我认为问题是，只要我显示（）工具提示，我就会同时做一个hide（）。

任何人都知道如何解决这个问题？谢谢！

Answer 1

你必须删除最后一部分：

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

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

避免不必要的切换

qTip2工具提示立即消失

1 个答案: