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

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

Основные компоненты Popper.js:

  • Popper — всплывающий элемент, который нужно позиционировать.
  • Reference — элемент, относительно которого происходит позиционирование.
  • Modifiers — плагины, управляющие поведением Popper, например, смещение, автоматическое изменение позиции или ограничение области видимости.

Параметр placement

Ключевым параметром для позиционирования является placement. Он определяет первичное направление всплывающего элемента относительно reference:

const popperInstance = Popper.createPopper(referenceElement, popperElement, {
  placement: 'top-start',
});

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

  • top, bottom, left, right — базовые позиции.
  • top-start, top-end, bottom-start, bottom-end — уточнённые позиции, учитывающие выравнивание по краям.
  • auto — Popper сам выбирает оптимальную позицию с учётом доступного пространства.

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

Модификатор flip

Модификатор flip отвечает за автоматическую смену позиции, если выбранное направление выходит за пределы видимой области:

const popperInstance = Popper.createPopper(referenceElement, popperElement, {
  placement: 'top',
  modifiers: [
    {
      name: 'flip',
      options: {
        fallbackPlacements: ['bottom', 'right', 'left'],
      },
    },
  ],
});

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

  • fallbackPlacements задаёт порядок альтернативных направлений.
  • Если flip включён, Popper проверяет, помещается ли элемент в окно, и при необходимости меняет позицию на первую доступную из списка fallback.
  • По умолчанию flip активен при использовании auto.

Ограничение области видимости (preventOverflow)

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

modifiers: [
  {
    name: 'preventOverflow',
    options: {
      boundary: 'viewport',
      padding: 8,
    },
  },
],

Параметры:

  • boundary — область, внутри которой Popper пытается удержать элемент (viewport, scrollParent, или любой DOM-элемент).
  • padding — отступ от границы области видимости.
  • Модификатор работает совместно с flip, чтобы избежать наложений и визуальных багов при автоматическом позиционировании.

Смещение элемента (offset)

Модификатор offset позволяет задавать дополнительное смещение Popper относительно reference:

modifiers: [
  {
    name: 'offset',
    options: {
      offset: [0, 10], // горизонтальное, вертикальное смещение
    },
  },
],

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

  • Параметр [skidding, distance] управляет смещением по оси reference и расстоянием от него.
  • Полезно для создания “воздушного” пространства между reference и всплывающим элементом.

Динамическое обновление позиции (update и autoUpdate)

Popper.js позволяет автоматически пересчитывать позицию при изменении размеров reference или окна:

import { autoUpdate } from '@popperjs/core';

const cleanup = autoUpdate(referenceElement, popperElement, popperInstance.update);
  • autoUpdate регистрирует слушатели resize, scroll и мутации DOM.
  • Позволяет Popper оставаться на корректной позиции без ручного вызова update.
  • Функция возвращает метод очистки слушателей, который следует вызвать при удалении элемента.

Использование arrow для указателей

Для отображения стрелки, указывающей на reference, применяется модификатор arrow:

modifiers: [
  {
    name: 'arrow',
    options: {
      element: arrowElement,
      padding: 5,
    },
  },
],
  • element — DOM-элемент стрелки.
  • padding — минимальное расстояние от границ Popper до стрелки.
  • arrow автоматически корректирует позицию стрелки при срабатывании flip или preventOverflow.

Сочетание модификаторов

Автоматическое позиционирование достигается через грамотное сочетание:

  1. placement: ‘auto’ — начальная оптимальная позиция.
  2. flip — смена позиции при нехватке места.
  3. preventOverflow — удержание в пределах окна.
  4. offset — визуальная подстройка расстояния.
  5. arrow — направление указателя.

Пример полной конфигурации:

const popperInstance = Popper.createPopper(referenceElement, popperElement, {
  placement: 'auto',
  modifiers: [
    { name: 'offset', options: { offset: [0, 10] } },
    { name: 'flip', options: { fallbackPlacements: ['top', 'right', 'bottom', 'left'] } },
    { name: 'preventOverflow', options: { boundary: 'viewport', padding: 8 } },
    { name: 'arrow', options: { element: arrowElement, padding: 5 } },
  ],
});

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

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

Оглавление