Dynamic content not shown after Ajax

Question

This question is related to this one. I'm using Tooltipster JQuery plugin to show tooltips on my website like:

HTML

<div class="tooltip" data-id="'.$comment['id'].'">Hover me!</div>

JS

<script type="text/javascript">
$(document).ready(function() {
    $('.tooltip').tooltipster({
        content: 'Loading...',
        functionBefore: function(instance, helper){
            var $origin = $(helper.origin);
            $.ajax({
                type: "POST",
                url: baseUrl+"/requests/load_profilecard.php",
                data: 'id='+ $origin.attr('data-id')+"&token_id="+token_id,
                cache: false,
                success: function(html) {           
                    // call the 'content' method to update the content of our tooltip with the returned data
                    instance.content(html);

                }
            });   
        },
        interactive:true,
        contentAsHTML:true,
        maxWidth:250
    });
});
</script>

Anyway this doesn't work on Ajax dynamic content, basically I load via Ajax new content with a function:

function exploreTracks(start, filter) {
    $('#load-more').html('<div class="load_more" style="height: 232px;"><div class="preloader-loadmore preloader-center"></div></div>');

    if(filter == '') {
        q = '';
    } else {
        q = '&filter='+filter;
    }

    $.ajax({
        type: "POST",
        url: baseUrl+"/requests/load_explore.php",
        data: "start="+start+q+"&token_id="+token_id, 
        cache: false,
        success: function(html) {
            $('#load-more').remove();

            // Append the new comment to the div id
            $('#main-content').append(html);

            // Reload the timeago plugin
            jQuery("div.timeago").timeago();
            // Update the Track Information
            updateTrackInfo(nowPlaying);
        }
    });
}

New contents on mouse hover don't show any tooltip, from console I can't see any error or warning and on network load_profilecard.php is not called.

I have placed the script (same JS as above) directly on my content page, so why the tooltip is not shown on mouse hover?

My solution

As suggested in comments by Evan I used delegation option for this purpose.

$(function() {
    $('body').on('mouseenter', '.tooltip:not(.tooltipstered)', function(){
        $(this)
            .tooltipster({      
            content: 'Loading...',
            functionBefore: function(instance, helper){
                var $origin = $(helper.origin);
                $.ajax({
                    type: "POST",
                    url: baseUrl+"/requests/load_profilecard.php",
                    data: 'id='+ $origin.attr('data-id')+"&token_id="+token_id,
                    cache: false,
                    success: function(html) {           
                        // call the 'content' method to update the content of our tooltip with the returned data
                        instance.content(html);

                    }
                });   
            },
            interactive:true,
            contentAsHTML:true,
            maxWidth:250 })
        .tooltipster('open');
    });
});