I'm using jQuery and Bootstrap to design a page where user selects a category and then related info is loaded on a div, and on this div I need tooltip.
My code works for static page, where the info is loaded with the page itself, but can't make it work for contents which are loaded after that.
I tried to replicate the desired result below using paint

Now on this page I need tooltip
Unfortunately my code stops working here, and no tooltip is shown, no request is made to tooltips.php

jQuery used to load tooltip contents

$(document).ready(function(){
$( ".content span" ).tooltip({
    track:true,
    open: function( event, ui ) {
          var id = this.id; 
          var userid = $(this).attr('data-id');            
          $.ajax({
              url:'tooltips.php',
              type:'post',
              data:{userid:userid},
              success: function(response){
                  $("#"+id).tooltip('option','content',response);
                    
              }
          });
    }
});

$(".content span").mouseout(function(){
    $(this).attr('title','Please wait...');
    $(this).tooltip();
    $('.ui-tooltip').hide();
}); 
});

function load(id) {
$.ajax({
url: 'content.php',
type: 'post',
data: {id: id},
success: function(response){ 
$('.modal-body').html(response);
$('#itiModal').modal('show'); 
  }
 });
}

Sample HTML which is loaded on Load button via load() from content.php

<div class='content'><span title='Please wait...' data-id='2' id='user_2'>Spiderman</span>/div> some text with other text 
<div class='content'><span title='Please wait...' data-id='3' id='user_3'>Spiderman-2</span></div>

Sample output from tooltips.php which should be shown in tooltip

<span class='head'>Name : </span><span>Tobey</span><br/>