Estoy usando jQuery y Bootstrap para diseñar una página donde el usuario selecciona una categoría y luego la información relacionada se carga en un div, y en este div necesito información sobre herramientas.
Mi código funciona para la página estática, donde la información se carga con la página misma, pero no puede hacer que funcione para los contenidos que se cargan después de eso.
Traté de replicar el resultado deseado a continuación usando pintura.

Ahora en esta página necesito información sobre herramientas
Desafortunadamente, mi código deja de funcionar aquí y no se muestra información sobre herramientas, no se realiza ninguna solicitud a tooltips.php

jQuery utilizado para cargar contenido de información sobre herramientas

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

Ejemplo de HTML que se carga en el botón Cargar mediante load() desde 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>

Salida de muestra de tooltips.php que debe mostrarse en la información sobre herramientas

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