Обработка ориентации

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

Возможные значения placement включают:

  • top — над элементом
  • bottom — под элементом
  • left — слева от элемента
  • right — справа от элемента
  • top-start, top-end, bottom-start, bottom-end — с привязкой к началу или концу элемента
  • left-start, left-end, right-start, right-end — аналогично для боковых позиций

Пример базовой инициализации:

tippy('#myButton', {
  content: 'Пример тултипа',
  placement: 'top'
});

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

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

  • flip: true — тултип будет автоматически менять ориентацию, если исходное положение перекрыто границами окна.
  • flip: ['top', 'bottom', 'right', 'left'] — задаёт порядок предпочтительных позиций.

Пример:

tippy('#myButton', {
  content: 'Тултип с автоповоротом',
  placement: 'top',
  flip: ['bottom', 'top', 'right', 'left']
});

В этом случае тултип сначала пытается отобразиться сверху (top). Если нет места, он проверяет bottom, затем right и left.

Контроль смещения и ориентации

Опция offset позволяет тонко настраивать позицию тултипа относительно целевого элемента:

tippy('#myButton', {
  content: 'Смещённый тултип',
  placement: 'right',
  offset: [0, 10] // [skid, distance]
});
  • skid — смещение по оси, перпендикулярной основной позиции.
  • distance — расстояние от целевого элемента.

Комбинация placement + offset позволяет создавать адаптивные подсказки, которые не перекрывают другие элементы интерфейса.

Расширенные возможности с Popper.js

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

  • boundary — задаёт границы, за которые тултип не выезжает (например, родительский контейнер).
  • preventOverflow — предотвращает выход тултипа за границы экрана или контейнера.
  • flipBehavior — устаревший синоним для настройки порядка ориентации, сейчас рекомендуется использовать flip.

Пример с ограничением области отображения:

tippy('#myButton', {
  content: 'Тултип с ограничением',
  placement: 'top',
  popperOptions: {
    modifiers: [
      {
        name: 'preventOverflow',
        options: {
          boundary: document.querySelector('#container')
        }
      }
    ]
  }
});

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

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

tippy('#myButton', {
  content: 'Динамическая ориентация',
  placement: (reference, popper) => {
    const rect = reference.getBoundingClientRect();
    return rect.top < 100 ? 'bottom' : 'top';
  }
});

В этом примере тултип отображается снизу, если элемент близко к верхнему краю окна, иначе сверху.

Работа с несколько тултипами и контейнерами

Когда на странице много тултипов, важно контролировать их контейнеры для предотвращения перекрытий и некорректной ориентации:

  • appendTo — задаёт, куда добавлять тултип в DOM.
  • При работе с скроллируемыми контейнерами рекомендуется использовать appendTo: 'parent' или указать конкретный контейнер.
tippy('.buttons', {
  content: 'Тултип внутри контейнера',
  placement: 'right',
  appendTo: document.querySelector('#scrollableContainer')
});

Итоговые рекомендации по ориентации

  • Использовать placement для начального положения.
  • Подключать flip для автоматической корректировки.
  • Настраивать offset для точного позиционирования.
  • Применять boundary и appendTo для предотвращения выхода за пределы контейнера.
  • Использовать динамическую функцию для placement, если положение должно зависеть от текущего состояния страницы.

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

Оглавление