Базовые направления размещения

Библиотека Tippy.js предоставляет мощный и гибкий механизм для создания всплывающих подсказок, контекстных меню и других элементов, требующих динамического позиционирования. Одним из ключевых аспектов является контроль направления и положения всплывающего элемента относительно целевого элемента (reference element).

Опция placement

Главная опция для управления расположением всплывающей подсказки — placement. Она определяет, с какой стороны целевого элемента будет отображаться тултип.

Возможные значения placement:

  • top — сверху
  • bottom — снизу
  • left — слева
  • right — справа
  • top-start — сверху, выровнено по левому краю
  • top-end — сверху, выровнено по правому краю
  • bottom-start — снизу, по левому краю
  • bottom-end — снизу, по правому краю
  • left-start — слева, по верхнему краю
  • left-end — слева, по нижнему краю
  • right-start — справа, по верхнему краю
  • right-end — справа, по нижнему краю

Пример использования:

tippy('#button', {
  content: 'Подсказка сверху',
  placement: 'top'
});

Выделение: placement — это базовая настройка, задающая начальное направление тултипа. В сочетании с опцией arrow можно дополнительно управлять положением стрелки относительно целевого элемента.

Автоматическое смещение и корректировка позиции

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

  • flip: true — позволяет тултипу автоматически изменять направление, если стандартное размещение не помещается на экране.
  • boundary — ограничивает область, внутри которой тултип может появляться (например, родительский контейнер или window).

Пример:

tippy('#button', {
  content: 'Тултип с автоматическим флипом',
  placement: 'right',
  flip: true,
  boundary: 'viewport'
});

Выделение: автоматический флип предотвращает ситуации, когда подсказка будет скрыта за пределами видимой области.

Смещение относительно целевого элемента

Для точной настройки позиции используется опция offset, которая принимает массив [skidding, distance]:

  • Skidding — смещение вдоль оси, перпендикулярной направлению (горизонтальное для top/bottom, вертикальное для left/right).
  • Distance — смещение вдоль основной оси (направление тултипа от целевого элемента).

Пример:

tippy('#button', {
  content: 'Смещённый тултип',
  placement: 'top',
  offset: [10, 20]
});

Выделение: offset полезен для точного позиционирования, когда стандартное размещение не обеспечивает нужного визуального эффекта.

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

Tippy.js позволяет использовать опцию followCursor и interactive для динамического позиционирования:

  • followCursor: true — тултип следует за курсором при наведении.
  • interactive: true — делает тултип интерактивным, чтобы пользователь мог взаимодействовать с его содержимым, не закрывая его.

Пример:

tippy('#button', {
  content: 'Следует за курсором',
  placement: 'top',
  followCursor: true,
  interactive: true
});

Выделение: комбинация этих опций особенно полезна для сложных интерфейсов с динамическим контентом.

Использование appendTo для контроля области рендеринга

Опция appendTo позволяет указать контейнер, в который будет помещён тултип. Это важно для управления позиционированием в контексте overflow или сложной верстки:

tippy('#button', {
  content: 'Тултип в кастомном контейнере',
  placement: 'bottom',
  appendTo: document.querySelector('#custom-container')
});

Выделение: appendTo предотвращает проблемы с обрезанием тултипа при overflow: hidden у родительских элементов.

Основные стратегии позиционирования

  1. Фиксированное положение: задаётся конкретным placement и смещением offset. Используется для статичных элементов.
  2. Адаптивное положение: используется flip: true и boundary, чтобы тултип корректно менял направление при ограниченном пространстве.
  3. Динамическое следование: сочетание followCursor и interactive позволяет тултипу адаптироваться под курсор и интерактивные элементы.

Советы по выбору направления

  • Для кнопок в верхней части страницы логично использовать bottom или bottom-start.
  • Для элементов с ограниченным пространством снизу — top или top-end.
  • Для вертикальных панелей слева — right или right-start.
  • Для горизонтальных меню сверху — чаще bottom с выравниванием start или end.

Выделение: правильный выбор направления делает интерфейс более предсказуемым и удобным для пользователя, а также предотвращает наложение на другие элементы.

Оглавление