qTip2 tooltip disappearing immediately

Question

I want my tooltips to toggle on and off by clicking on them. I tried experimenting with the API toggle function but am running into problems, as you can see here:

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!
            })
    });

});

Note: I am using AJAX to load the tooltip content, so cross-domain Access Control prevents the actual image from loading. Here is the same thing on my server with AJAX loading properly: http://rasamritakunj.com/qtip.

Regardless of the missing content in jsfiddle, the problem is evident even by clicking the "error:" tooltip. Some of the tips stay on, but after clicking a few times they just blink on and off.

I think the problem is that, as soon as I show() the tooltip, I'm simultaneously doing a hide().

Anyone have any idea how to resolve this? Thanks!

Answer 1

You have to remove the last part:

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

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

to avoid unnecessary toggling