jquery cluetip on dynamic elements

Question

I can't seem to get this to work properly.

I am writing several links to the DOM (looping through a json file and appending to the DOM), and then I need those elements to trigger tooltips on hover.

I'm not seeing a good example of this method anywhere - the cluetip site shows a brief example, of looking for the a and calling cluetip then. I'm thinking there must be a .live or .delegate way to do this:

$("body").delegate("a.toolTip", "mouseover", function (event) {

            $('a.toolTip').cluetip({
                showTitle: false,
                attribute: 'title',
                local: false
                });

            event.preventDefault();

        });

but this doesn't trigger the first mouseover and I get a "sorry, contents could not be loaded"

Any ideas?

thanks

Answer 1

You need to re-trigger the mouseover event.

$("body").delegate("a.toolTip", "mouseenter", function (event) {
    $('a.toolTip').cluetip({
        showTitle: false,
        attribute: 'title',
        local: false
    }).trigger("mouseenter");

    event.preventDefault();
});

Additional nitpick things:

event.preventDefault() should come first, and you should prevent the plugin from being applied multiple times.

$("body").delegate("a.toolTip:not(.hasTooltip)", "mouseenter", function (event) {

    $('a.toolTip').cluetip({
        showTitle: false,
        attribute: 'title',
        local: false
    }).addClass("hasTooltip").trigger("mouseenter");
    event.preventDefault();
});

Edit: mouseover should have been mouseenter, and the event.preventDefault really should be last so that if it does fail, the default tooltip will still work.