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

Tippy.js предоставляет возможность динамически управлять поведением подсказок при прокрутке страницы, что особенно важно для сложных интерфейсов с большим количеством контента. Основной механизм для этого — опции popperOptions и встроенные плагины Popper.js, на которых основан Tippy.js.

Опция appendTo

По умолчанию подсказки добавляются в body, что гарантирует их отображение поверх любого контента. В случаях, когда требуется привязка к определённой области с прокруткой, используют:

tippy('.button', {
  content: 'Подсказка привязана к контейнеру',
  appendTo: document.querySelector('.scrollable-container')
});

Ключевой момент: если контейнер с прокруткой имеет CSS-свойство overflow: auto или scroll, подсказка будет перемещаться вместе с контентом, сохраняя позицию относительно родительского элемента.

Параметр sticky для подсказок

Опция sticky обеспечивает прикрепление подсказки к элементу при прокрутке, предотвращая её “отрыв” от целевого элемента:

tippy('.button', {
  content: 'Я остаюсь с кнопкой при прокрутке',
  sticky: true
});

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

Плагины для динамической прокрутки

Tippy.js поддерживает плагины Popper.js, такие как flip, preventOverflow и hide, которые влияют на поведение подсказки при изменении видимой области:

tippy('.button', {
  content: 'Динамическая подсказка',
  placement: 'top',
  popperOptions: {
    modifiers: [
      {
        name: 'flip',
        options: {
          fallbackPlacements: ['top', 'bottom', 'right', 'left']
        }
      },
      {
        name: 'preventOverflow',
        options: {
          boundary: 'viewport'
        }
      },
      {
        name: 'hide',
        enabled: true
      }
    ]
  }
});

Объяснение:

  • flip позволяет подсказке менять позицию, если элемент выходит за границы видимой области.
  • preventOverflow гарантирует, что подсказка не выйдет за пределы контейнера или окна браузера.
  • hide автоматически скрывает подсказку, если целевой элемент полностью выходит из зоны видимости.

Автоматическое закрытие подсказки при прокрутке

Для UX важно, чтобы подсказка закрывалась, если пользователь скроллит страницу далеко от элемента. Tippy.js поддерживает это через событие onHidden и методы контроля вручную:

const instance = tippy('.button', {
  content: 'Закроюсь при прокрутке'
});

window.addEventListener('scroll', () => {
  instance.forEach(i => i.hide());
});

Такой подход позволяет предотвратить “зависание” подсказок на странице, улучшая восприятие интерфейса.

Настройка interactive при скролле

Если подсказка содержит интерактивные элементы (кнопки, ссылки), важно использовать interactive: true. При этом Tippy.js учитывает прокрутку, чтобы подсказка не скрывалась преждевременно, пока пользователь взаимодействует с её содержимым:

tippy('.menu', {
  content: '<button>Нажми меня</button>',
  allowHTML: true,
  interactive: true
});

В сочетании с appendTo и sticky это обеспечивает корректное поведение подсказки в любом контейнере с прокруткой.

Динамическая проверка позиции при скролле

Можно использовать метод instance.popperInstance.update() для ручного обновления позиции подсказки при сложной анимации или плавном скролле:

const instance = tippy('.button', {
  content: 'Обновляю позицию при скролле'
});

window.addEventListener('scroll', () => {
  instance.forEach(i => i.popperInstance.update());
});

Это позволяет точно отслеживать положение элемента на странице и корректировать отображение подсказки в реальном времени.

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

  • Для длинных страниц использовать appendTo с контейнером, который имеет прокрутку, чтобы подсказка перемещалась вместе с элементом.
  • Включать sticky: true для элементов, которые должны оставаться видимыми относительно цели.
  • Применять плагины Popper.js (flip, preventOverflow, hide) для корректного поведения при смене положения на экране.
  • Для интерактивных подсказок всегда включать interactive: true, чтобы пользователь мог взаимодействовать без случайного закрытия при скролле.
  • В сложных интерфейсах использовать ручное обновление позиции через popperInstance.update() для точного контроля.

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

Оглавление