mouseover shows raw html data and trigger infinite time - php

Question

I have a tree structure where on hover of the user image it should show some of other user related info but instead of show that info in proper div, its show raw HTML data.
HTML Code
there can be n number of a href
<a href="{{ route('user-binary-tree',[ 'eUserID' => $ERight12]) }}" class="bt-element binary-tree-on-hover" id="{{$ERight12}}">
<img class="rounded-circle" style="width: 50px" src="{{ asset($packageImg) }}">
{{ $Right12[0]->sponsor_code }}
</a>
JavaScript code
$('.binary-tree-on-hover').mouseover(function() {
var userId = this.id;
var $this = $(this);
$.ajax('/binary-tree-ajax/' + userId + '/html', {
method: "GET",
dataType: "html",
success: function(data) {
$this.attr('title', data).mouseover(); //HTML DATA SHOW IN HOVER
}
});
});
Ajax response is
<div class="bt-details">
<table class="table color-table inverse-table">
<thead>
<tr>
<td class="text-center" style="font-size: 100%">Chethan k Test</td>
<td class="text-center" style="font-size: 100%"></td>
<td class="text-center">
<span class="btn btn-danger btn-xs btn-outline" style="border-width: 2px;">Inactive</span>
</td>
</tr>
<tr>
<td class="text-center" style="font-size: 100%">Sponsor ID</td>
<td class="text-center" style="font-size: 100%" colspan="2">UNO187175</td>
</tr>
<tr>
<td class="text-center" style="font-size: 100%">Binary Qualified</td>
<td class="text-center" style="font-size: 100%" colspan="2">
<span class="btn btn-danger btn-xs btn-outline" style="border-width: 2px;">No</span>
</td>
</tr>
<tr>
<th width="40%" class="text-center">Position</th>
<td class="text-center" style="font-size: 95%">Left</td>
<td class="text-center" style="font-size: 95%">Right</td>
</tr>
</thead>
<tbody>
<tr>
<th width="40%" class="text-center">Downline</th>
<td class="text-center">39</td>
<td class="text-center">6</td>
</tr>
<tr>
<th width="40%" class="text-center">Business</th>
<td class="text-center">$0</td>
<td class="text-center">$0</td>
</tr>
<tr>
<th width="40%" class="text-center">Carry</th>
<td class="text-center">$0</td>
<td class="text-center">$0</td>
</tr>
<tr>
<th width="40%" class="text-center" rowspan="2">Binary Generated</th>
<td class="text-center" style="font-size: 95%">Last Day</td>
<td class="text-center" style="font-size: 95%">Till Date</td>
</tr>
<tr>
<td class="text-center">$0</td>
<td class="text-center">$</td>
</tr>
</tbody>
</table>
When i hover on any of the user image its shows row HTML data instead of proper div as seen in 1st image
Also its keep calling the Ajax request infinite times but when i remove $this.attr('title', data).mouseover(); its called Ajax request only once. so i think the infinite calling happening because of this line only.
here how its shows
but i want to show like this
Note : 2nd one is working but its not ajax call and it will fetch all the user info from controller and load on view hence when user increase it will slow down the page so i am trying to call ajax on hover of the image.

Answer 1

End up with using popover function
HTML Code
<div id="popover_html" style="display:none;">
hover_data
</div>
JavaScript Code
jQuery('.binary-tree-on-hover').popover({
title: popoverContent,
html: true,
placement: 'bottom',
trigger: 'hover'
});
function popoverContent() {
var content = '';
var element = $(this);
var id = element.attr("id");
var APP_URL = "{{ url('/')}}";
const adminRoutePrefix = $("#admin_route_prefix").text();
$.ajax({
url: APP_URL + '/' + adminRoutePrefix + '/networks/binary-tree-ajax/' + id + '/html',
method: "GET",
async: false,
// dataType: "HTML",
success: function(data) {
content = $("#popover_html").html();
content = content.replace(/hover_data/g, data);
}
});
return content;
}