Adding a tooltip on appended <li> elements not working - php

Question

I have a live search functionality which returns a complete li element and append it to some container afterwards. But the tooltip is not working. Here is my code:
$(".hb_search_text_job").on('keyup', function() {
var search_val = $('.hb_search_text_job').val();
var current_user_id = $('.hb_footer_user_id').val();
if(search_val.length > 2){
$.ajax({
type: "POST",
url: "<?php echo admin_url('admin-ajax.php'); ?>",
data: { action: 'search_jobs_list',
current_user_id: current_user_id,
search_val: search_val
},
success: function(data) {
$('#hb_sidebarmenu li .submenu li .submenu li').remove();
$.each(JSON.parse(data), function(key,val) {
$('#hb_sidebarmenu li .submenu li .submenu .hb_job_listing').append(val);
},
error: function() {
console.log('ERROR');
}
});
}
});
And here is the sample of the return code:
<li data-rel='tooltip' rel='tooltip' title='A tooltip yay!'>";
<a href='#' class='hb_job_id_link'>";
<div class='hb_menu_name'>My li name</div>";
</a></li>";
Any possible idea or solution?

Answer 1

You will need to reinitialize the tooltio after adding the content.
success: function(data) {
$('#hb_sidebarmenu li .submenu li .submenu li').remove();
$.each(JSON.parse(data), function(key,val) {
$('#hb_sidebarmenu li .submenu li .submenu .hb_job_listing').append(val);
}
$("[data-rel='tooltip']").tooltip(); // Re-init tooltip
},