javascriptjqueryqtip2

qTip2 - Call a function after changing content of a tooltip


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.


Solution

  • 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');
                });
            }
        }
    });