Всплывающая подсказка 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, проблема очевидна даже при нажатии на подсказку "error:". Некоторые советы остаются включенными, но после нескольких нажатий они просто мигают и выключаются.

Я думаю, проблема в том, что, как только я показываю () всплывающую подсказку, я одновременно выполняю скрытие ().

Кто-нибудь есть идеи, как решить эту проблему? Спасибо!

Answer 1

Вы должны удалить последнюю часть:

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

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

чтобы избежать ненужного переключения