Адаптация под разные placement

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

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

Например:

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

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

createPopper(button, tooltip, {
  placement: 'top-end',
});

В этом случае tooltip будет расположен над кнопкой, смещён к правому краю.

Адаптивность при изменении пространства

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

createPopper(button, tooltip, {
  placement: 'bottom',
  modifiers: [
    {
      name: 'preventOverflow',
      options: {
        boundary: 'viewport', // можно указать родителя или конкретный элемент
        padding: 8,           // отступ от границ
      },
    },
  ],
});

Если снизу нет места, Popper автоматически сместит элемент вверх. Опция boundary может принимать:

  • 'viewport' — границы окна.
  • 'clippingParents' — ближайшие родительские элементы с overflow ограничением.
  • HTML-элемент — конкретная область для ограничения.

Механизм flip для автоматической смены позиции

Модуль flip позволяет Popper.js менять placement, если изначально выбранная позиция не помещается:

createPopper(button, tooltip, {
  placement: 'right',
  modifiers: [
    {
      name: 'flip',
      options: {
        fallbackPlacements: ['left', 'top', 'bottom'],
        padding: 5,
      },
    },
  ],
});
  • fallbackPlacements — массив альтернативных позиций.
  • Popper будет последовательно проверять каждую, выбирая оптимальную.
  • Можно использовать стратегию mainAxis и crossAxis для более тонкой настройки.

Настройка смещения через offset

Даже при адаптивном размещении часто требуется точная настройка позиции. Модуль offset позволяет смещать поппер по основной и перекрёстной осям:

createPopper(button, tooltip, {
  placement: 'bottom',
  modifiers: [
    {
      name: 'offset',
      options: {
        offset: [0, 10], // [смещение по основной оси, смещение по перекрёстной]
      },
    },
  ],
});
  • Первый параметр смещает вдоль направления placement.
  • Второй параметр — перпендикулярно.

Контроль стратегии позиционирования

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

createPopper(button, tooltip, {
  strategy: 'fixed',
});
  • absolute позиционирование подчиняется родительским элементам с position.
  • fixed игнорирует прокрутку, что полезно для глобальных тултипов.

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

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

const popperInstance = createPopper(button, tooltip, { placement: 'top' });

// обновление позиции после изменения DOM
popperInstance.update();

Можно вызывать update() при изменении размера или видимости референса. Это особенно важно для адаптивного размещения в интерфейсах с изменяющимся контентом.

Примеры сложной адаптивной конфигурации

  1. Тултип, меняющий сторону при нехватке места и с дополнительным смещением:
createPopper(button, tooltip, {
  placement: 'top',
  modifiers: [
    { name: 'flip', options: { fallbackPlacements: ['bottom', 'right', 'left'] } },
    { name: 'offset', options: { offset: [0, 12] } },
    { name: 'preventOverflow', options: { padding: 8, boundary: 'viewport' } },
  ],
});
  1. Поппер, закреплённый на фиксированной позиции и реагирующий на окно:
createPopper(button, tooltip, {
  placement: 'bottom-end',
  strategy: 'fixed',
  modifiers: [
    { name: 'preventOverflow', options: { boundary: window } },
  ],
});

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

Оглавление