Стилизация стрелки

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

Подключение стрелки

Чтобы Popper.js корректно работал со стрелкой, необходимо:

  1. Создать DOM-элемент стрелки внутри поппера:
<div id="tooltip">
  Tooltip content
  <div id="arrow" data-popper-arrow></div>
</div>
  1. Передать его в Popper через модификатор arrow:
const popperInstance = Popper.createPopper(referenceElement, tooltip, {
  modifiers: [
    {
      name: 'arrow',
      options: {
        element: '#arrow',  // селектор или DOM-элемент стрелки
        padding: 5,         // отступ от границ поппера
      },
    },
  ],
});
  • element — элемент стрелки. Может быть селектором CSS или DOM-узлом.
  • padding — минимальное расстояние от границ поппера до стрелки, чтобы стрелка не выходила за край.

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

Popper.js автоматически вычисляет положение стрелки с учётом:

  • placement поппера (top, bottom, left, right, с вариациями -start, -end).
  • Размеров поппера и стрелки.
  • Параметра padding из модификатора arrow.

При этом координаты стрелки задаются через CSS-переменные:

[data-popper-arrow] {
  position: absolute;
  width: 10px;
  height: 10px;
  background: black;
  transform: rotate(45deg);
}

Popper.js обновляет стиль top, left, right, bottom автоматически, чтобы стрелка была выровнена с reference элементом.

Внешний вид стрелки

Внешний вид стрелки задаётся стандартными CSS-свойствами:

  • width, height — размеры стрелки.
  • background — цвет.
  • border-radius — скругление углов, если требуется.
  • transform — вращение (обычно rotate(45deg) для ромбовидной стрелки).

Пример ромбовидной стрелки с цветом и скруглением:

#arrow {
  width: 12px;
  height: 12px;
  background: #333;
  transform: rotate(45deg);
  border-radius: 2px;
}

Адаптация к разным направлениям

Popper.js добавляет атрибут data-popper-placement на поппер. Это позволяет использовать CSS для изменения внешнего вида стрелки в зависимости от позиции:

[data-popper-placement^='top'] #arrow {
  bottom: -6px;
}

[data-popper-placement^='bottom'] #arrow {
  top: -6px;
}

[data-popper-placement^='left'] #arrow {
  right: -6px;
}

[data-popper-placement^='right'] #arrow {
  left: -6px;
}
  • Символ ^= в селекторе означает «начинается с», что позволяет учесть вариации top-start, bottom-end и т.д.
  • Расстояние -6px корректируется под размер стрелки и padding.

Интерактивные и анимированные стрелки

Для создания анимаций стрелки можно использовать CSS-переходы:

#arrow {
  transition: all 0.2s ease;
}

[data-popper-placement^='top'] #arrow {
  transform: rotate(45deg) translateY(0);
}

[data-popper-placement^='bottom'] #arrow {
  transform: rotate(45deg) translateY(-2px);
}
  • Анимация работает при смене позиции поппера.
  • Можно комбинировать с эффектами появления или масштабирования поппера для плавного визуального результата.

Дополнительные советы

  • Всегда задавать размер стрелки меньше размера поппера, иначе она будет визуально выходить за границы.
  • Использовать padding модификатора arrow, чтобы стрелка не была сдвинута к краю.
  • При сложной стилизации рекомендуется добавлять отдельный контейнер для стрелки, чтобы управлять transform и background независимо от поппера.

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

Оглавление