Добавление стрелки к Popper

Popper.js — это библиотека для управления позиционированием элементов, таких как всплывающие подсказки, тултипы и выпадающие меню. Одним из ключевых визуальных элементов является стрелка, которая указывает на целевой элемент (reference element). Для добавления стрелки используется модификатор arrow.

Подготовка HTML-структуры

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

<div id="reference">Кнопка</div>
<div id="popper">
  <div id="arrow" data-popper-arrow></div>
  Содержимое поппера
</div>

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

  • Элемент стрелки должен иметь атрибут data-popper-arrow или класс, указанный в конфигурации.
  • Стрелка всегда должна быть вложена внутри поппера, а не рядом с ним.
  • Размер и форма стрелки управляются через CSS.

Настройка Popper.js с модификатором стрелки

При инициализации Popper необходимо добавить модификатор arrow. Пример использования с классической инициализацией:

const reference = document.querySelector('#reference');
const popper = document.querySelector('#popper');
const arrow = document.querySelector('#arrow');

const popperInstance = Popper.createPopper(reference, popper, {
  placement: 'top', // Расположение поппера относительно reference
  modifiers: [
    {
      name: 'arrow',
      options: {
        element: arrow,
        padding: 5, // Отступ стрелки от края поппера
      },
    },
    {
      name: 'offset',
      options: {
        offset: [0, 10], // Смещение поппера относительно reference
      },
    },
  ],
});

Ключевые моменты:

  • placement определяет позицию поппера (top, bottom, left, right) и автоматически меняет положение стрелки.
  • padding задаёт минимальное расстояние стрелки от края поппера, чтобы она не выходила за пределы.
  • Модификатор arrow автоматически вычисляет позицию стрелки и применяет transform или top/left стили.

Стиль стрелки с CSS

Поппер не накладывает собственные стили на стрелку, поэтому необходимо создать CSS:

#popper {
  background-color: #333;
  color: #fff;
  padding: 8px 12px;
  border-radius: 4px;
  position: relative;
}

#arrow {
  position: absolute;
  width: 10px;
  height: 10px;
  background: #333;
  transform: rotate(45deg);
}

Замечания:

  • Стрелка часто делается квадратной с поворотом на 45° для эффекта треугольника.
  • Цвет стрелки должен совпадать с фоном поппера.
  • Размер стрелки влияет на визуальное расстояние до reference и должен учитываться при настройке offset.

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

Popper.js умеет динамически корректировать позицию стрелки при изменении позиции поппера. Если поппер автоматически меняет placement из top на bottom, стрелка также изменит положение:

const popperInstance = Popper.createPopper(reference, popper, {
  placement: 'auto',
  modifiers: [
    { name: 'arrow', options: { element: arrow, padding: 8 } },
    { name: 'flip', options: { fallbackPlacements: ['top', 'bottom', 'right', 'left'] } },
  ],
});

Пояснения:

  • Модификатор flip позволяет Popper менять placement при нехватке места.
  • Стрелка автоматически подстраивается под новое положение.
  • padding предотвращает визуальное “прилипание” стрелки к краям поппера.

Тонкости позиционирования стрелки

  1. Отступ от края: Стрелка не должна касаться краёв поппера. Для этого используется padding в модификаторе arrow.

  2. Положение по оси: Если placement: top или bottom, стрелка смещается по горизонтали. Если placement: left или right, стрелка смещается по вертикали.

  3. Плавающая ширина: Если поппер меняет размер, Popper автоматически корректирует координаты стрелки при каждом вызове update().

popperInstance.update();
  1. Производительность: Рекомендуется ограничивать частоту вызова update() при анимациях, чтобы не создавать лишнюю нагрузку на браузер.

Пользовательские стрелки

Стрелку можно стилизовать или использовать сложные SVG-элементы:

<div id="arrow" data-popper-arrow>
  <svg width="16" height="8" viewBox="0 0 16 8">
    <path d="M0,8 L8,0 L16,8" fill="#333"/>
  </svg>
</div>

При этом модификатор arrow будет работать точно так же, позиционируя контейнер SVG внутри поппера.

Работа с transformOrigin

Для анимаций важно учитывать, что стрелка смещается независимо от поппера. Чтобы анимации выглядели естественно:

#popper {
  transform-origin: center bottom; /* Для top placement */
  transition: transform 0.2s ease;
}
  • transform-origin должен соответствовать позиции стрелки.
  • Это позволяет сделать плавное появление и исчезновение тултипов.

Выводы по использованию стрелки

  • Стрелка — отдельный DOM-элемент с атрибутом data-popper-arrow.
  • Модификатор arrow автоматически позиционирует стрелку в зависимости от placement.
  • Размер, цвет и форма стрелки контролируются CSS или SVG.
  • Для динамических и адаптивных попперов модификаторы flip и offset обеспечивают корректное поведение.
  • Обновление позиции стрелки требует вызова update() после изменений размеров или позиции popper.

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

Оглавление