Tooltips

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

Инициализация Popper.js

Для создания tooltip необходимо определить reference element (элемент, к которому привязывается подсказка) и popper element (сам tooltip). Основная структура кода:

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

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

const popperInstance = createPopper(referenceElement, popperElement, {
  placement: 'top', // позиция tooltip: top, bottom, left, right
});

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

  • placement определяет изначальное направление всплывающего блока относительно целевого элемента.
  • Popper автоматически управляет смещением и перекрытием элементов, чтобы tooltip оставался видимым в пределах viewport.

Активация и деактивация tooltip

Tooltip не должен отображаться постоянно. Для управления показом используются классы или стили:

referenceElement.addEventListener('mouseenter', () => {
  popperElement.setAttribute('data-show', '');
  popperInstance.update(); // обновляет позицию при появлении
});

referenceElement.addEventListener('mouseleave', () => {
  popperElement.removeAttribute('data-show');
});

Особенности управления:

  • update() необходимо вызывать каждый раз, когда размеры или положение reference element изменяются динамически.
  • Использование атрибута data-show позволяет подключить CSS-анимации для плавного появления/исчезновения tooltip.

Модификаторы Popper.js

Модификаторы управляют поведением Popper:

  1. offset – смещение tooltip от reference element:
createPopper(referenceElement, popperElement, {
  placement: 'bottom',
  modifiers: [
    {
      name: 'offset',
      options: {
        offset: [0, 8], // 8px вниз от кнопки
      },
    },
  ],
});
  1. preventOverflow – предотвращает выход tooltip за границы окна:
modifiers: [
  {
    name: 'preventOverflow',
    options: {
      boundary: 'viewport', // ограничение по области видимости окна
      padding: 8,
    },
  },
]
  1. flip – автоматически меняет позицию при нехватке места:
modifiers: [
  {
    name: 'flip',
    options: {
      fallbackPlacements: ['top', 'right', 'left'],
    },
  },
]
  1. arrow – для позиционирования стрелки tooltip:
modifiers: [
  {
    name: 'arrow',
    options: {
      element: '[data-popper-arrow]', // селектор стрелки внутри tooltip
    },
  },
]

Динамическое управление контентом

Tooltip может содержать разный контент, включая HTML-структуры. Для этого достаточно менять содержимое элемента:

referenceElement.addEventListener('mouseenter', () => {
  popperElement.innerHTML = '<strong>Подсказка:</strong> Дополнительная информация';
  popperInstance.update();
});

Важно помнить, что при использовании HTML необходимо соблюдать правила безопасности: избегать вставки непроверенного пользовательского контента, чтобы предотвратить XSS.

Адаптация под мобильные устройства

Popper.js автоматически учитывает размеры окна и положение reference element. Для мобильных устройств полезно:

  • Увеличивать offset, чтобы tooltip не перекрывал палец пользователя.
  • Ограничивать максимальную ширину tooltip через CSS:
#tooltip {
  max-width: 200px;
  word-wrap: break-word;
}
  • Использовать события touchstart и touchend для отображения tooltip на сенсорных устройствах.

CSS-анимации и стилизация

Tooltip легко стилизуется через CSS. Для плавного появления применяются переходы:

#tooltip {
  opacity: 0;
  transition: opacity 0.3s;
  background-color: #333;
  color: #fff;
  padding: 6px 12px;
  border-radius: 4px;
}

#tooltip[data-show] {
  opacity: 1;
}

Стрелка tooltip:

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

Модификатор arrow автоматически позиционирует элемент стрелки относительно границы tooltip и reference element.

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

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

// Обновление позиции
popperInstance.update();

// Полное удаление
popperInstance.destroy();

Это важно при удалении или скрытии элементов, чтобы не оставлять лишние слушатели событий или память.

Комбинирование с другими библиотеками

Popper.js отлично интегрируется с React, Vue, Angular. В React часто используют обертки вроде react-popper, которые упрощают управление жизненным циклом и реактивное обновление позиций tooltip.

Popper.js обеспечивает точное, адаптивное позиционирование tooltip с минимальными усилиями. Правильное использование модификаторов, событий и CSS позволяет создавать интерактивные, безопасные и эстетически привлекательные всплывающие подсказки на любых веб-страницах.

Оглавление