qTip2 - Call a function after changing content of a tooltip

165 Views Asked by At

I have a qTip tooltip where I'm loading its content via ajax. After the content is loaded I need to call a function someFunction()

$('.element').qtip(
{
    content: 
    {
        text: function(event, api) 
        {
            api.elements.content.text('Loading...');

            var content = $.ajax(
            {
                url: 'loadcontent.php',
                dataType: 'json'
            })
            .then(function(result) 
            {
                // Some code for changing result html
                return result.html;

            }, function(xhr, status, error) 
            {
                api.set('content.text', 'Error');
            });

            // Calling a function, but it's too early (content is still not in the tooltip)
            someFunction();

            return content;
        }
    }
});

To be honest I'm not sure where to put someFunction() so it's called after the content is added into the tooltip. There is no event which is fired after the content is changed.

1

There are 1 best solutions below

0
Koralek M. On BEST ANSWER

I came up with a solution:

$('.element').qtip(
{
    content: 
    {
        text: 'Loading...'
    },
    events: 
    {
        show: function(event, api) 
        {
            $.ajax(
            {
                url: 'loadcontent.php',
                dataType: 'json'
            })
            .then(function(result) 
            {
                api.set('content.text', result.html);

                someFunction();

            }, function(xhr, status, error) 
            {
                api.set('content.text', 'Error');
            });
        }
    }
});