JQuery Tooltip

by Venkata Sai Vamsi Penupothu

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>

CSS

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

JavaScript

$('#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();    
});

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