Работа с прокруткой страницы

Tooltipster — это мощная библиотека для создания кастомизируемых тултипов в JavaScript. Одним из ключевых аспектов взаимодействия с пользователем является корректная работа тултипов при прокрутке страницы. Без правильной настройки тултип может «теряться» при скролле, перекрываться другими элементами или смещаться относительно целевого объекта.

Привязка тултипа к элементу при скролле

Tooltipster использует позиционирование относительно целевого элемента с помощью библиотеки Popper.js. При изменении положения страницы тултип автоматически смещается вместе с элементом, если активирован режим updateAnimation: true.

Пример базовой инициализации с учётом прокрутки:

$('.tooltip').tooltipster({
    theme: 'tooltipster-light',
    animation: 'fade',
    delay: 100,
    trigger: 'hover',
    updateAnimation: true,
    side: 'top',
});

Ключевые параметры:

updateAnimation: true — включает плавное обновление позиции тултипа при скролле или изменении размеров окна.
side — указывает сторону появления тултипа относительно элемента. При скролле положение будет динамически корректироваться.

Использование `functionPosition` для кастомного поведения

Для сложных интерфейсов с динамическими элементами, изменяющими размер или положение при прокрутке, лучше использовать functionPosition. Этот колбэк позволяет вручную корректировать координаты тултипа.

Пример:

$('.tooltip').tooltipster({
    functionPosition: function(instance, helper, position){
        // Смещение тултипа на 10px вниз при прокрутке
        position.coord.top += 10;
        return position;
    }
});

Параметры колбэка:

instance — объект тултипа, через который можно управлять содержимым и опциями.
helper — содержит данные о целевом элементе и о текущем положении тултипа.
position — объект с координатами и размерами тултипа и целевого элемента. Можно изменить top и left для кастомного позиционирования.

Перезапуск позиции при динамическом контенте

Если на странице появляются новые элементы или изменяется размер существующих во время прокрутки, важно использовать метод reposition:

var tooltip = $('.tooltip').tooltipster().tooltipster('instance');
$(window).on('scroll resize', function(){
    tooltip.reposition();
});

Метод reposition() принудительно пересчитывает координаты тултипа и корректно его отображает, даже если целевой элемент сместился.

Привязка тултипов к контейнерам с прокруткой

Если элемент находится внутри блока с собственным скроллом, необходимо использовать параметр appendTo:

$('.tooltip').tooltipster({
    appendTo: $('.scroll-container'),
    theme: 'tooltipster-shadow',
    side: 'bottom'
});

appendTo определяет контейнер, к которому будет прикреплён тултип.
При скролле внутри контейнера тултип остаётся корректно позиционированным относительно элемента.

События скролла и оптимизация производительности

При большом количестве тултипов постоянная проверка позиции при каждом событии скролла может вызвать лаги. Tooltipster использует throttle, но для дополнительной оптимизации можно использовать собственную задержку:

let scrollTimeout;
$(window).on('scroll', function() {
    clearTimeout(scrollTimeout);
    scrollTimeout = setTimeout(function() {
        $('.tooltip').tooltipster('reposition');
    }, 50);
});

Это позволяет пересчитывать позиции не на каждый пиксель прокрутки, а с заданной периодичностью, снижая нагрузку на браузер.

Интерактивные тултипы и скролл

Для интерактивных тултипов, которые содержат кнопки или формы, важно учитывать interactive: true:

$('.tooltip').tooltipster({
    interactive: true,
    delay: 0,
    updateAnimation: true
});

Опция interactive предотвращает закрытие тултипа при наведении на его содержимое.
Комбинация с updateAnimation гарантирует корректное позиционирование при скролле и взаимодействии пользователя.

Обработка изменений размеров окна

При изменении размеров окна тултип может смещаться. Для этого можно подписаться на событие resize и использовать метод reposition:

$(window).on('resize', function(){
    $('.tooltip').tooltipster('reposition');
});