при наведении мыши отображаются необработанные данные html и запускается бесконечное время

Question

У меня есть древовидная структура, в которой при наведении курсора на пользовательское изображение должна отображаться некоторая другая информация, относящаяся к пользователю, но вместо того, чтобы показывать эту информацию в соответствующем элементе div, она отображает необработанные HTML данные.

HTML код

может быть число n 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 код

$('.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 ответ:

<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>

При наведении курсора на любое изображение пользователя отображается строка HTML данных вместо правильного div, как видно на 1-е изображение Также он продолжает вызывать запрос Ajax бесконечное количество раз, но когда я удаляю $this.attr('title', data).mouseover();, его вызываемый Ajax запрос только один раз. так что я думаю, что бесконечное призвание происходит только из-за этой строки.

вот как она показывает

но я хочу показать вот так

Примечание: 2-й работает, но не вызов ajax, и он будет получить всю пользовательскую информацию из контроллера и загрузить при просмотре, следовательно, при увеличении пользователя она замедлит страницу, поэтому я пытаюсь вызвать ajax при наведении на изображение.

Answer 1

В конечном итоге использовать функцию поповера

HTML Код

<div id="popover_html" style="display:none;">
    hover_data
</div>

JavaScript Код

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;
}