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

Для начала работы с Popper.js необходимо установить библиотеку. Существует несколько способов подключения: через npm/yarn или напрямую через CDN.

Установка через npm:

npm install @popperjs/core

Установка через yarn:

yarn add @popperjs/core

Подключение через CDN:

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

После подключения библиотеки можно использовать объект Popper для создания всплывающих элементов.

Создание базового поппера

Поппер отвечает за позиционирование всплывающего элемента относительно целевого. Основные элементы — это reference element (элемент-источник) и popper element (всплывающий элемент).

Простейший пример:

<button id="button">Нажми меня</button>
<div id="tooltip" role="tooltip">
  Всплывающая подсказка
  <div id="arrow" data-popper-arrow></div>
</div>
import { createPopper } from '@popperjs/core';

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

createPopper(button, tooltip, {
  placement: 'top',
});
  • button — элемент, относительно которого позиционируется поппер.
  • tooltip — сам поппер.
  • placement: 'top' — определяет позицию поппера относительно reference element. Возможные значения: top, bottom, left, right, а также их варианты с -start и -end.

Опции создания Popper

Popper.js предоставляет гибкие настройки через объект options:

  1. placement — начальная позиция всплывающего элемента.
  2. strategy — стратегия позиционирования: absolute или fixed.
  3. modifiers — массив модификаторов для изменения поведения поппера.

Пример с модификаторами:

createPopper(button, tooltip, {
  placement: 'right',
  strategy: 'fixed',
  modifiers: [
    {
      name: 'offset',
      options: {
        offset: [0, 10], // смещение по оси X и Y
      },
    },
    {
      name: 'flip',
      options: {
        fallbackPlacements: ['left', 'bottom'],
      },
    },
    {
      name: 'preventOverflow',
      options: {
        boundary: 'viewport',
      },
    },
  ],
});
  • offset — задаёт смещение поппера относительно reference element.
  • flip — автоматически меняет позицию, если место на экране ограничено.
  • preventOverflow — предотвращает выход поппера за пределы указанных границ.

Работа с стрелкой поппера

Стрелка — визуальный элемент, указывающий на reference element. Для её корректного позиционирования используется специальный атрибут data-popper-arrow.

<div id="tooltip" role="tooltip">
  Всплывающая подсказка
  <div id="arrow" data-popper-arrow></div>
</div>

Модификатор arrow в Popper.js автоматически учитывается, если элемент с атрибутом присутствует:

createPopper(button, tooltip, {
  placement: 'top',
  modifiers: [
    {
      name: 'arrow',
      options: {
        element: document.querySelector('#arrow'),
      },
    },
  ],
});

Стрелка будет позиционироваться динамически в зависимости от смещения и доступного пространства.

Обновление и уничтожение Popper

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

  • Обновление:
const popperInstance = createPopper(button, tooltip);
popperInstance.update();
  • Уничтожение:
popperInstance.destroy();

Методы update и destroy позволяют управлять жизненным циклом всплывающего элемента.

Адаптивное позиционирование

Поппер автоматически подстраивается под окно браузера. Основные модификаторы для адаптивного поведения:

  1. flip — меняет позицию при недостатке места.
  2. preventOverflow — не даёт попперу выходить за пределы контейнера.
  3. hide — скрывает поппер, если элемент полностью выходит за границы видимой области.

Пример:

createPopper(button, tooltip, {
  placement: 'bottom',
  modifiers: [
    { name: 'flip' },
    { name: 'preventOverflow', options: { boundary: 'viewport' } },
    { name: 'hide' },
  ],
});

Popper.js динамически вычисляет положение и применяет эти модификаторы, чтобы всплывающий элемент всегда оставался видимым.

Пример интерактивного поппера

Для всплывающей подсказки при наведении:

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

function show() {
  tooltip.setAttribute('data-show', '');
  popperInstance = createPopper(button, tooltip, {
    placement: 'top',
  });
}

function hide() {
  tooltip.removeAttribute('data-show');
  if (popperInstance) {
    popperInstance.destroy();
    popperInstance = null;
  }
}

button.addEventListener('mouseenter', show);
button.addEventListener('mouseleave', hide);
  • Атрибут data-show используется для управления видимостью через CSS.
  • Поппер создаётся динамически и уничтожается после ухода мыши.

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

Оглавление