Фиксированное и абсолютное позиционирование

Библиотека Tippy.js позволяет создавать сложные и гибкие всплывающие подсказки (tooltips) с широкими возможностями настройки позиционирования. Одним из ключевых аспектов является управление позиционированием элементов: фиксированное (fixed) и абсолютное (absolute). Понимание этих режимов особенно важно при работе с динамическими интерфейсами, скроллируемыми контейнерами и сложной структурой DOM.

Абсолютное позиционирование (absolute)

Абсолютное позиционирование в Tippy.js привязывает подсказку к ближайшему родителю с относительным позиционированием (position: relative) в DOM. Это стандартное поведение библиотеки по умолчанию.

Особенности:

  • Подсказка перемещается вместе с родительским элементом.
  • Если родитель прокручивается, подсказка остаётся на своём месте относительно родителя.
  • Для расчёта позиции используется библиотека Popper.js, интегрированная в Tippy.js.
  • Удобно для элементов внутри статических контейнеров или компонентов с ограниченной областью.

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

tippy('#button', {
  content: 'Подсказка с абсолютным позиционированием',
  placement: 'right',
  theme: 'light',
});

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

Фиксированное позиционирование (fixed)

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

Активация fixed режима:

tippy('#button', {
  content: 'Подсказка с фиксированным позиционированием',
  placement: 'bottom',
  popperOptions: {
    strategy: 'fixed', // ключевой параметр
  },
});

Особенности:

  • Подсказка остаётся на экране даже при прокрутке родителя.
  • Используется абсолютное позиционирование относительно окна браузера.
  • Позволяет избежать “обрезания” подсказок внутри скроллируемых контейнеров.

Отличия absolute и fixed

Свойство Absolute Fixed
Относительно чего позиционируется Родительский элемент с position: relative/absolute Вьюпорт (окно браузера)
Поведение при прокрутке родителя Перемещается вместе с родителем Остаётся на месте
Используется по умолчанию Да Нет, требует popperOptions.strategy = 'fixed'
Подходит для Статичных компонентов внутри контейнера Скроллируемых областей и глобальных подсказок

Настройка Popper.js для Tippy.js

Tippy.js строится на Popper.js, который управляет позиционированием подсказок. Ключевой параметр — strategy, который может принимать значения:

  • "absolute" — по умолчанию, подсказка привязана к родителю.
  • "fixed" — подсказка привязана к вьюпорту.

Кроме того, можно управлять поведением подсказки при ограничениях области с помощью modifiers:

tippy('#button', {
  content: 'Подсказка с ограничением по области',
  placement: 'top',
  popperOptions: {
    strategy: 'absolute',
    modifiers: [
      {
        name: 'preventOverflow',
        options: {
          boundary: document.querySelector('#scrollContainer'),
        },
      },
    ],
  },
});

Здесь подсказка не выйдет за пределы контейнера #scrollContainer, сохраняя абсолютное позиционирование.

Динамическое переключение между режимами

Иногда требуется менять стратегию позиционирования в зависимости от состояния интерфейса:

const tippyInstance = tippy('#button', {
  content: 'Подсказка',
  placement: 'right',
});

document.querySelector('#toggle').addEventListener('click', () => {
  tippyInstance.setProps({
    popperOptions: {
      strategy: 'fixed',
    },
  });
});

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

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

  • Использовать absolute для внутренних компонентов и форм.
  • Использовать fixed для подсказок, которые должны оставаться видимыми при прокрутке страницы или контейнера.
  • Всегда учитывать родительские CSS-свойства, такие как overflow, transform, position, так как они влияют на расчет позиции.
  • При сложной структуре DOM комбинировать strategy: fixed с модификаторами Popper.js для ограничения области и предотвращения обрезания подсказки.
Оглавление