Loading jQuery qTip code dynamically

Question

Hello everyone,

For an application I am writing, I have the need to dynamically load content into a DIV when a form is submitted.

This dynamically loaded content needs several tooltips to be displayed automatically at the time of loading (no need for an event to trigger it). I chose qTip because it has parameters to do this, unlike most other tooltips I found, which require an event to trigger the tooltip (like onmouseover).

This is the qTip code used to achieve this:

$(function(){
    $('#someelement').qtip({
        content: 'This is the message!',
        show: { ready: true, when: false },
        hide: { false },
        position: {
            corner: {
                target: 'topLeft',
                tooltip: 'bottomRight'
            }
        },
        style: {
                        ............ styling code here................
            }
        }
    })
});

This works fine in any shape or form that I try it. The tip successfully appears.

However, the tooltip does not appear if I am dynamically loading this code along with the content.

The content is being loaded using Malsup's great form and taconite plugins.

Any ideas would be greatly appreciated!

Of course, if you know of another method or plugin I could use to achieve the same similar effect, don't be shy to suggest it. :)

Answer 1

I've had this problem before and this is how I solved it. Put the plugin code inside a separate function and call that on document ready:

$(function(){
    loadQtip();
});

function loadQtip() {
    $('#someelement').qtip({
        content: 'This is the message!',
        show: { ready: true, when: false },
        hide: { false },
        position: {
            corner: {
                target: 'topLeft',
                tooltip: 'bottomRight'
            }
        },
        style: {
                        ............ styling code here................
            }
        }
    })
}

Then when you add in new data call the function again:

...
complete: function() {
    loadQtip();
}

You'll find for events such as click, change etc the .live() method works a treat, but when your setting a plugin to an element there isn't a persistent method.