Изменение координат

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

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

При создании поппера используются ключевые опции:

  • placement — определяет, с какой стороны относительно reference будет располагаться поппер. Допустимые значения: 'top', 'bottom', 'left', 'right', а также комбинации с -start и -end (например, 'top-start').
  • modifiers — массив объектов, позволяющих изменять поведение поппера. Один из самых важных модификаторов — offset, влияющий на смещение по осям X и Y.
  • strategy — метод позиционирования: 'absolute' или 'fixed'. 'fixed' блокирует поппер относительно окна просмотра, игнорируя скролл страницы.

Пример базовой конфигурации:

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

const button = document.querySelector('#button');
const tooltip = document.querySelector('#tooltip');

const popperInstance = createPopper(button, tooltip, {
  placement: 'top',
  modifiers: [
    {
      name: 'offset',
      options: {
        offset: [0, 10], // смещение по X и Y
      },
    },
  ],
});

В этом примере поппер будет расположен сверху кнопки с вертикальным смещением на 10 пикселей.

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

Popper.js предоставляет методы для обновления координат в реальном времени:

  • popperInstance.update() — пересчитывает позицию и применяет текущие настройки.
  • popperInstance.setOptions(options) — позволяет изменить параметры, такие как placement или modifiers, и применить их без пересоздания экземпляра.

Пример изменения позиции после события:

button.addEventListener('click', () => {
  popperInstance.setOptions({
    placement: 'right',
    modifiers: [
      {
        name: 'offset',
        options: { offset: [20, 0] }, // смещение по X
      },
    ],
  });
  popperInstance.update();
});

Здесь поппер перемещается справа от кнопки с горизонтальным смещением 20px после клика.

Модификатор offset и управление координатами

Offset позволяет задавать конкретное смещение поппера относительно reference. Он принимает массив [skidding, distance]:

  • skidding — смещение по горизонтали (для top/bottom) или по вертикали (для left/right).
  • distance — расстояние от reference по основной оси.

Также возможна функция, возвращающая массив динамически:

modifiers: [
  {
    name: 'offset',
    options: {
      offset: ({ placement, reference, popper }) => {
        if (placement.startsWith('top')) return [0, 15];
        return [0, 5];
      },
    },
  },
];

Такой подход позволяет изменять координаты в зависимости от расположения поппера.

Использование модификатора preventOverflow

Модификатор preventOverflow предотвращает выход поппера за границы контейнера или окна просмотра. Он корректирует координаты автоматически:

modifiers: [
  {
    name: 'preventOverflow',
    options: {
      boundary: document.querySelector('#container'),
      padding: 8, // минимальное расстояние до границы
    },
  },
];

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

Прямое управление координатами

Если требуется полностью управлять положением поппера, можно использовать модификатор popperOffsets:

modifiers: [
  {
    name: 'applyCustomOffsets',
    enabled: true,
    phase: 'write',
    fn({ state }) {
      state.styles.popper.top = `${state.rects.reference.top + 50}px`;
      state.styles.popper.left = `${state.rects.reference.left + 30}px`;
    },
  },
];

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

Интеграция с анимациями

При изменении координат важно учитывать плавность перехода. Для этого можно использовать CSS-переходы совместно с popperInstance.update(). Например:

#tooltip {
  transition: transform 0.2s ease;
}

Popper.js обновляет позицию через CSS-трансформации, что делает анимацию плавной без резких перескоков.

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

  • Для динамического контента лучше использовать update() после любых изменений размеров или положения reference.
  • Смещения лучше задавать через offset, чтобы сохранять совместимость с модификаторами preventOverflow и flip.
  • Если требуется полностью ручное позиционирование, использовать модификаторы write-фазы, напрямую меняя state.styles.popper.
  • Для сложных макетов и анимаций комбинировать Popper.js с CSS-переходами, чтобы не нарушить производительность.

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

Оглавление