Question

I am using qTip (jquery.qtip-1.0.0-rc3.min) and jQuery (jquery-1.3.2).

When using qTip in IE with non-dynamically loaded content qTip works fine. However, when loading content via an ajax call the qTip content does not resize once content is loaded. I have tried adding an updateWidth on the various callbacks without any luck. In fact, when utilizing updateWidth I get a small white box at the top left corner of the qTip content. This same code works fine in Safari, Firefox, and Opera.

What’s going on with IE that is keeping the content from resizing when using an ajax call?

$(document).ready(function() {
    $('ul.person_info li:first-child').each(function() {
        $(this).qtip({
            show: 'mouseover',
            hide: 'mouseout',
            style: {
                name: 'cream'
            },
            content: {
                url: '<%= Url.Action("FindPerson", "People") %>',
                data: { id: $(this).attr('id') },
                method: 'get'
            }
        });
    });

    $('ul.person_info li:first-child').qtip({
        api: {
            onContentUpdate: function() { this.updateWidth(); },
            onContentLoad: function() { this.updateWidth(); },
            beforeContentLoad: function() { this.updateWidth(); }
        }
    });
});

Answer 1

After requesting help on the qTip forums Dustin Moore, Craig Thomson and I were able to identify an issue with the qTip plugin. The issue was resolved by a fork of qTip by Dustin. This fork was later pulled into the main qTip branch and is available in the archived versions of qTip.

It is important to note that qTip has evolved and moved onto qTip2 and that this question, answer and fix centered around qTip 1.0.