Блог

Я использую TippyJS для добавления некоторых всплывающих подсказок на свой веб-сайт. У них есть HTML-контент, который работает нормально, за исключением того, что при загрузке страницы вы можете на короткое время увидеть содержимое, прежде чем оно исчезнет. Как я могу это исправить? Мой сайт теперь перескакивает, потому что какой-то HTML-файл tippy находится в моей структуре меню.

У меня просто есть эти файлы в нижнем колонтитуле:

 <!-- Popper JS -->
<script src="assets/js/popper.min.js"></script>
<!-- Tippy JS -->
<script src="https://unpkg.com/tippy.js@6"></script>
 

Пример всплывающей подсказки, которая у меня есть:

 <span class="tooltippy_nostyle">
    <img class="infosvg" src="assets/images/custom/icon_info.svg">
    <div class="tooltipcontent darktext">
    Test
    </div>
</span>
 

И JS:

 $( ".tooltippy_nostyle" ).each(function( i ) {
    tippy(this, {
        trigger: 'click',
        allowHTML: true,
        animation: 'scale-subtle',
        interactive: true,
        content: function (reference) {
            return reference.querySelector('.tooltipcontent');
        }
    });
});
 

Не имеет значения, что это за содержимое, много html или просто 1 слово. Содержимое отображается первым, прежде чем код TippyJS удалит его и поместит во всплывающую подсказку. Что я могу сделать, чтобы это исправить? Я попытался переместить файлы из нижнего колонтитула в верхний колонтитул, но это ничего не изменило.