Минимальная конфигурация

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

Через npm:

npm install @popperjs/core

Через CDN:

<script src="https://unpkg.com/@popperjs/core@2"></script>

После подключения Popper.js можно создавать простейшие попперы с минимальными настройками.

Создание простого поппера

Для базовой конфигурации требуется три вещи:

  1. Элемент-отправитель (reference element) – элемент, относительно которого будет позиционироваться поппер.
  2. Элемент-поппер (popper element) – всплывающий элемент, который нужно разместить.
  3. Инициализация Popper – вызов функции Popper.createPopper() с обязательными параметрами.

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

<button id="button">Кнопка</button>
<div id="tooltip">Подсказка</div>

<script>
  const button = document.getElementById('button');
  const tooltip = document.getElementById('tooltip');

  const popperInstance = Popper.createPopper(button, tooltip);
</script>

В этом примере поппер появится рядом с кнопкой, используя значения по умолчанию: placement = “bottom”, strategy = “absolute”.

Основные параметры минимальной конфигурации

1. placement – позиция поппера относительно reference element. Возможные значения:

  • top
  • bottom
  • left
  • right
  • auto – автоматический выбор лучшей позиции

Если параметр не указан, Popper.js по умолчанию устанавливает bottom.

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

2. strategy – способ позиционирования поппера. Возможные варианты:

  • absolute – элемент позиционируется относительно ближайшего предка с position: relative/absolute
  • fixed – элемент фиксирован на экране, игнорируя прокрутку
const popperInstance = Popper.createPopper(button, tooltip, {
  strategy: 'fixed',
});

3. modifiers – массив объектов для расширения функционала. В минимальной конфигурации можно использовать пустой массив или пропустить.

const popperInstance = Popper.createPopper(button, tooltip, {
  modifiers: [],
});

Управление видимостью поппера

Popper.js отвечает только за позиционирование, но не за отображение. Для базового сценария часто используют CSS:

#tooltip {
  background-color: black;
  color: white;
  padding: 5px 10px;
  border-radius: 4px;
  display: none;
}

#tooltip.show {
  display: block;
}

И JavaScript для показа/скрытия:

button.addEventListener('mouseenter', () => {
  tooltip.classList.add('show');
  popperInstance.update();
});

button.addEventListener('mouseleave', () => {
  tooltip.classList.remove('show');
});

Метод popperInstance.update() гарантирует корректное позиционирование после изменения видимости.

Простейшие модификаторы

Для минимальной конфигурации можно подключить базовые модификаторы:

  • offset – смещение поппера относительно reference element
const popperInstance = Popper.createPopper(button, tooltip, {
  modifiers: [
    {
      name: 'offset',
      options: {
        offset: [0, 8], // сдвиг по горизонтали и вертикали
      },
    },
  ],
});
  • preventOverflow – предотвращает выход поппера за границы окна
const popperInstance = Popper.createPopper(button, tooltip, {
  modifiers: [
    {
      name: 'preventOverflow',
      options: {
        padding: 5,
      },
    },
  ],
});

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

Методы экземпляра Popper

Даже при минимальной настройке доступны следующие методы:

  • popperInstance.update() – пересчитать позицию поппера
  • popperInstance.destroy() – удалить поппер и очистить слушатели
  • popperInstance.setOptions(options) – изменить конфигурацию на лету

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

popperInstance.setOptions({
  placement: 'left',
});
popperInstance.update();

Минимальная конфигурация Popper.js включает в себя только reference element, popper element и вызов Popper.createPopper(). По умолчанию используются placement: 'bottom' и strategy: 'absolute'. Дополнительные модификаторы и управление видимостью позволяют адаптировать поведение попперов под любые интерфейсы, но для базового всплывающего элемента этого достаточно.

Оглавление