jquery ui tooltip on appended element - fiddle included

Question

I cannot make tooltip to work on appended element.

Fiddle is here: http://jsfiddle.net + jeffz2012/4xwM9/8/ (cannot make this link to work)

Code is here:

//css:
//---------
.mrg {
    margin: 15px;
}
.hand {
    cursor: pointer;
}
.help {
    cursor: help;
}
.brd {
    padding:7px;
    border: solid 1px #ccc;
}



//html:
//---------
<div class="mrg tip brd help" title="I am a regular tooltip">point mouse here for non appended tooltip</div>
<div id="trig" class="mrg hand brd">now click here, to append another div</div>
<div id="rec" class="mrg" title="I am appended tooltip, but I do not work"></div>



//jquery
//---------
$('#trig').on('click', function() {
    $('#rec').append('<div class="help brd tip">this is appended element and should show tooltip on hover</div>');
});

$( '.tip' ).tooltip({
    open: function( event, ui ) {
        ui.tooltip.animate({
            top: ui.tooltip.position().top + 10
        }, "fast" );
    },
    position: {
        my: "center botto", 
        at: "center top+10",
        collision: "flipfit"
    }

});

Answer 1

If I got you right, this is the solution:

http://jsfiddle.net/4xwM9/9/

You have to initialize tooltip for appended div.

$('#trig').on('click', function() {
    var $addedTooltip = $('<div class="help brd tip">this is appended element and should show tooltip on hover</div>');

    $('#rec').append($addedTooltip);

    $addedTooltip.tooltip();    
});

Answer 2

go to jQuery.tipsy.js file change live: false, to true on line 175