Question

I have this jQuery tooltip that works fine on initial page loads. The problem is when I AJAX append another [tooltipwrapper] block the tooltip doesn’t work on it. Please see codes below, any suggestion would be greatly appreciated!

$(function() {
    $('.tooltipwrapper').each(function () {
        var $tip = $('> .info-block', this);
        var $span = $('> span', this);
        if (!$span.length) {
            var $span = $('> a', this);
        };
        var $old_html = $tip.html();
        var $new_html = '<div class="box-i-l"><div class="box-i-r"><span class="box-i">' + $tip.html() + '</span></div></div>';
        $(this).hover(function () {
            $span.addClass('act');
            $tip.html($new_html);           
            if ($.browser.msie && $.browser.version < 9) {
                $tip.show();
            } else {
                $tip.css('display', 'none');
                $tip.stop().fadeTo(300, 1);}
        }, function () {
            $span.removeClass('act');
            if ($.browser.msie && $.browser.version < 9) {
                $tip.hide();
                $tip.html($old_html);
            } else {
        $tip.css('display', 'block');
                    $tip.stop().fadeTo(50, 0, function() {$tip.css('display', 'none'); $tip.html($old_html);});
            }
        });
    });
});



<div class="tooltipwrapper">
<span class="ico_link #tstatus#"></span>
<div style="opacity: 0; display: none;" class="info-block">
<span class="statusTitle">TASK STATUS</span><br /> 
<a id="1" href="javascript:;" rel="Queue" class="TaskStatusUpdate">Queue</a> 
<a id="1" href="javascript:;" rel="Working" class="TaskStatusUpdate">Working</a> 
<a id="1" href="javascript:;" rel="Completed" class="TaskStatusUpdate">Completed</a
<a id="1" href="javascript:;" rel="Onhold" class="TaskStatusUpdate">On-hold</a>
<a id="1" href="javascript:;" rel="Canceled" class="TaskStatusUpdate">Cancel</a>
</div>

Answer 1

This is because this code only runs on page load. You need to put the whole thing in a function and call that function every time a new node is appended. The jQuery function doesn’t run continually throughout the life of the page.

//so like this
function tooltipMe(){
    //all your code goes here
}

tooltipMe(); // every time you add a new tooltip-able div.