Как правильно использовать Tippy и не засорить весь DOM?

Всем привет, столкнулся с проблемой используя tippy, при наведение на элемент на странице засоряется DOM и всё лагает ;(

Вывожу элементы на страницу их БД:

<div class="row">
    @foreach($items as $item)
    <div class="col-auto col-sm-4 col-md-3 col-lg-2 pb-3">
        <a href="#" data-uuid="{{ $item->uuid }}" class="link-info data-tooltip-item">
            <div class="hover">
                @php( $titles = json_decode($item->titles) )
                <img src="{{ config('img_host') . $item->urn_poster }}" alt="{{ $titles->name }}"  class="img-fluid">
                <div class="mt-2 truncate">{{ $titles->russian }}</div>
            </div>
        </a>
    </div>
    @endforeach
</div>

Вот код который я использую:

$(function () {


        $('a.data-tooltip-item').hover(

            function() {

                $('#t-t-p-title-ru').html( 'Название сериала 1' );

                const template = document.getElementById('data-tooltip-inner');
                const myClarityTemplate = document.createElement('div');

                myClarityTemplate.innerHTML = template.innerHTML;

                tippy.one(this, {
                    arrow: false,
                    arrowType: 'sharp',
                    allowHTML: true,
                    html: myClarityTemplate,
                    theme: "clarity",
                    //interactive: false,
                    placement: 'right-start',
                });

            }, function() {

                //

            }

        );

    });

Шаблон

<div id="data-tooltip-inner" class="d-none text-dark">
    <div class="text-center pt-3 pb-2">
        <div id="t-t-p-title-ru" class="h5"></div>
        <div id="t-t-p-title-en"></div>
    </div>
</div>

Подскажите советом.