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

Библиотека была разработана Федерико Зиволо и впервые представлена в 2016 году. Она быстро стала стандартом де-факто для позиционирования всплывающих элементов в современных веб-приложениях. Popper.js используется в таких популярных фреймворках, как Bootstrap, и интегрируется с различными библиотеками пользовательских интерфейсов, включая React и Vue. Важно отметить, что Popper.js не является библиотекой для создания всплывающих подсказок или поповеров, а представляет собой универсальный механизм позиционирования, который может быть использован для реализации различных интерфейсных компонентов.

С момента своего появления Popper.js претерпел несколько изменений и улучшений. В версии 2.x была представлена модульная архитектура, основанная на модификаторах, что позволило значительно расширить возможности настройки поведения и внешнего вида всплывающих элементов. Библиотека не имеет зависимостей от других библиотек, таких как jQuery, и обеспечивает высокую производительность и совместимость с различными браузерами и устройствами.

• Модульная архитектура: Popper.js использует систему модификаторов, позволяющую гибко настраивать поведение всплывающих элементов, включая их позицию, отступы, повороты и другие параметры.
• Поддержка различных стратегий позиционирования: библиотека позволяет выбирать между абсолютным и фиксированным позиционированием, а также автоматически адаптирует положение элемента в зависимости от доступного пространства.
• Автоматическое управление переполнением: Popper.js учитывает размеры экрана и контейнеров, предотвращая выход всплывающего элемента за пределы видимой области и обеспечивая его корректное отображение.
• Интеграция с фреймворками: библиотека легко интегрируется с популярными JavaScript-фреймворками, такими как React, Vue и Angular, а также с библиотеками пользовательских интерфейсов, включая Bootstrap.
• Поддержка Shadow DOM: Popper.js корректно работает с элементами, использующими Shadow DOM, что расширяет возможности её применения в сложных веб-приложениях.
• Минимальный размер: библиотека имеет небольшой размер (~3 кБ), что способствует быстрой загрузке страниц и экономии трафика.
• Отсутствие внешних зависимостей: Popper.js не требует наличия других библиотек, таких как jQuery или Lodash, что упрощает её использование и уменьшает объём загружаемого кода.
• Поддержка различных браузеров: библиотека обеспечивает корректную работу во всех современных браузерах, включая Chrome, Firefox, Safari и Internet Explorer 11.
• Активное сообщество и поддержка: Popper.js имеет активное сообщество разработчиков и пользователей, что обеспечивает регулярные обновления, исправления ошибок и улучшения функциональности.