Создание речевых пузырей на странице с помощью Popper.js

Все знают о всплывающие подсказки и есть десятки бесплатных ресурсов, которые помогут вам сделать их. тем не мение, пользовательские сообщения пузыри или же “попперс” также очень полезны.

Oни не ограничиваются парящими событиями, таким образом, они могут появляться на странице последовательно и обходить поведение других пользователей.

Если вы хотите создать эти пузырьки речи тогда на вашем сайте Popper.js это лучший выбор. Это бесплатный плагин с открытым исходным кодом, размещенный на официальном сайте js.org.

Вы найдете эти всплывающие подсказки на многих веб-сайтах со сложными интерфейсами. Иногда они предложат Быстрые советы, прохождения, а также совет по адаптации для людей, плохо знакомых с интерфейсом.

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

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

Когда пользователь прокручивает страницу вниз, он может потерять пузырь. С этим плагином вы можете заставить его вернуться в поле зрения переключая его вверх (или вниз), в зависимости от направления прокрутки пользователя.

Вы имеете полный контроль над границами, положением стрелок, цветами всплывающей подсказки и многим другим. Не говоря уже о том, что этот плагин великолепен и полностью расширяемый если вы хотите добавить свои собственные функции в микс.

Весь исходный код доступен бесплатно на GitHub, если вы хотите проверить его.

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

Если вы хотите узнать больше о разработке, ознакомьтесь с этой записью в блоге, написанной создателем Федерико Зиволо.