6 бесплатных библиотек для создания всплывающих подсказок на JavaScript
Подсказка — это небольшое всплывающее текстовое окно, которое появляется, когда пользователь наводит указатель мыши на элемент пользовательского интерфейса. Подсказки позволяют пользователям просматривать дополнительную информацию об элементе, не щелкая его.
С ростом сложности современных пользовательских интерфейсов всплывающие подсказки помогают разработчикам во многих сценариях, таких как отображение информации о продукте или изображении, кнопок призыва к действию и описаний изображений. В результате доступны различные сторонние библиотеки для реализации всплывающих подсказок. Но выбрать что-то одно непросто, так как все они имеют уникальные особенности.
Итак, в этой статье я расскажу о шести различных библиотеках всплывающих подсказок на основе JavaScript, чтобы помочь вам выбрать лучшую для вашего проекта.
1. Типпи.js
Tippy.js — мощная библиотека, упрощающая реализацию всплывающих подсказок. Он предоставляет функциональные возможности всплывающих подсказок для объектов HTML, которые можно расширять и использовать различными способами, включая настройку тем всплывающих подсказок, вложение всплывающих подсказок и изменение местоположения отображения всплывающих подсказок.
Процесс установки также довольно прост, и вы можете установить Tippy через NPM, Yarn или CDN, чтобы использовать его непосредственно на HTML-страницах. На веб-сайте Tippy также есть примеры для каждой ситуации загрузки и подробные инструкции по добавлению или удалению функций.
Tippy.js имеет более 10 700 звезд GitHub.
Функции
- Легкая, удобная библиотека.
- Поддерживает все положения (верхнее, нижнее, левое, правое).
- Полезные решения обратного вызова.
- Поддерживает любую HTML-разметку во всплывающей подсказке.
- Для одного и того же элемента допускается использование нескольких всплывающих подсказок.
Монтаж
Вы можете легко установить Tippy.js с помощью NPM или Yarn следующим образом:
// Using NPM npm i tippy.js // Using Yarn yarn add tippy.js
В противном случае вы можете установить его через CDN:
<!-- Development --> <script src="https://unpkg.com/tippy.js@6/dist/tippy-bundle.umd.js"></script> <!-- Production --> <script src="https://unpkg.com/tippy.js@6"></script>
Вы можете найти рабочую демонстрацию Tippy.js на StackBlitz.
Выход
2. Подсказка CSS
Hint.css — это очень простая библиотека на чистом CSS для ваших проектов JavaScript. По сравнению с другими, эта библиотека довольно легкая и специализирована для всплывающих подсказок. Он позволяет настраивать цвет, размер, стиль всплывающих подсказок (со стрелками, закругленными углами и т. д.) и эффекты анимации. Hint.css имеет более 8300 звезд на GitHub.
Функции
- Размер 1,5 КБ после минимизации и сжатия.
- Никаких дополнительных настроек не требуется.
- Поддерживает специальные возможности с помощью атрибутов aria-label.
- Только ССС. Нет JavaScript.
- Работает со всеми современными браузерами.
Монтаж
Вы можете легко установить CSS.hint с помощью NPM или CDN следующим образом:
// Using NPM npm install --save hint.css // Using CDN <link rel="stylesheet" href="hint.min.css" />
Вы можете найти рабочую демонстрацию Hint.css на JSFiddle.
Выход
3. Поппер
Popper — еще одна легкая библиотека JavaScript, которая позволяет легко создавать всплывающие подсказки и всплывающие окна. Он решает все основные проблемы использования чистого CSS для всплывающих подсказок и сохраняет производительность приложения. Он широко используется в таких библиотеках, как Bootstrap, Foundation и Material UI. У Поппера более 12 000 еженедельных загрузок NPM.
Функции
- Позволяет размещать всплывающие подсказки относительно ссылки.
- Предотвращает обрезание или обрезание всплывающих подсказок при изменении размера экрана.
- Всего 2 КБ в сжатом виде.
- Обновление позиции происходит менее чем за миллисекунду.
- Подходит для любого элемента пользовательского интерфейса, включая мобильные представления, полосы прокрутки и многое другое.
- Поддерживает несколько конфигураций.
Монтаж
Вы можете легко установить Popper с помощью NPM или Yarn следующим образом:
// Using NPM npm i @popperjs/core // Using Yarn yarn add @popperjs/core
Или вы можете установить его через CDN:
<!-- Development --> <script src="https://unpkg.com/@popperjs/core@2/dist/umd/popper.js"></script> <!-- Production --> <script src="https://unpkg.com/@popperjs/core@2"></script>
Вы можете найти рабочую демо-версию Popper на StackBlitz.
Выход
4. Подсказка начальной загрузки
Подсказка Bootstrap является частью фреймворка Bootstrap. Он позволяет добавлять настраиваемые всплывающие подсказки, когда пользователи наводят курсор, фокусируются или касаются элемента с помощью CSS, JavaScript и CSS3. Он использует Popper для позиционирования и требует util.js, если вы собираете Bootstrap JavaScript из исходного кода.
Bootstrap, в целом, имеет более 4,5 миллионов еженедельных загрузок NPM и 162 000 звезд GitHub.
Функции
- Подсказки с заголовками нулевой длины автоматически скрываются.
- Подсказки не будут активироваться для скрытых элементов.
- Всплывающие подсказки будут центрированы при активации гиперссылками, пересекающими несколько строк.
- Элемент внутри теневого DOM может вызвать появление всплывающих подсказок.
Монтаж
Вы можете легко установить Bootstrap Tooltip с помощью NPM следующим образом:
npm i bootstrap-tooltip
Вы можете найти рабочую демонстрацию Bootstrap Tooltip на StackBlitz.
Выход
5. Плавающий интерфейс
Floating UI — широко используемая библиотека для позиционирования привязки. Это позволяет создавать плавающие элементы, такие как всплывающие подсказки и всплывающие окна, при этом не закрывая основной вид элемента. Размер плавающего пользовательского интерфейса составляет всего 0,6 КБ после минимизации и сжатия Brotli. Тем не менее, он предоставляет удивительные функции, такие как несколько вариантов размещения, перелистывание, стрелки и многое другое.
Floating UI имеет 2,5 миллиона еженедельных загрузок NPM и более 24 700 звезд GitHub.
Функции
- Разрешить размещение всплывающих подсказок относительно любой координаты.
- Поддерживает взаимодействие для React с перехватчиками для таких событий, как щелчок, фокус, наведение, ввод текста и т. д.
- Динамически расположите стрелку всплывающей подсказки в центре элемента.
- Автоматически измените размер всплывающей подсказки, чтобы она оставалась на дисплее.
- Автоматически переворачивает положение всплывающей подсказки, чтобы она оставалась на дисплее.
Монтаж
Вы можете легко установить Floating UI с помощью NPM следующим образом:
# Vanilla JavaScript npm install @floating-ui/dom # React DOM — positioning + interactions npm install @floating-ui/react # React DOM — positioning only npm install @floating-ui/react-dom # React Native — positioning only npm install @floating-ui/react-native # Vue npm install @floating-ui/vue
Вы можете найти рабочую демонстрацию Floating UI на StackBlitz.
Выход
6. Синкфузия
Syncfusion Tooltip — это широко используемый всплывающий элемент управления на основе JavaScript для отображения контекстной справки, советов или дополнительной информации в виде всплывающих подсказок в веб-приложениях. Всплывающие подсказки легко настраиваются и предлагают широкий спектр функций и параметров для настройки их размера, положения и внешнего вида. Syncfusion Tooltip имеет около 100 000 еженедельных загрузок NPM.
Функции
- Поддерживает 12 различных позиций для отображения всплывающих подсказок.
- Поддерживает различные триггеры, такие как наведение, щелчок, фокусировка и касание.
- Позволяет создавать всплывающие подсказки с изображениями, ссылками или пользовательским содержимым HTML.
- Поддерживает ряд анимаций и эффектов для улучшения взаимодействия с пользователем.
- Создан с учетом производительности и доступности.
- Поддерживает интеллектуальное позиционирование на основе области просмотра.
Монтаж
Вы можете легко установить Syncfusion Tooltip с помощью NPM следующим образом:
npm i @syncfusion/ej2-popups
Вы можете найти рабочую демонстрацию Syncfusion Tooltip на StackBlitz.
Примечание. Syncfusion предлагает бесплатную Лицензию сообщества, которая позволяет вам получить доступ к этому элементу управления бесплатно.
Выход
Заключение
Всплывающая подсказка может помочь вам отобразить дополнительные сведения, когда пользователь наводит курсор на объект на вашем веб-сайте. Он стал мощным элементом пользовательского интерфейса в современных веб-приложениях.
В этой статье обсуждались шесть разных библиотек для создания всплывающих подсказок в JavaScript с уникальными функциями. Надеюсь, мои советы помогут вам выбрать лучшую библиотеку для вашего проекта. Спасибо за чтение.
Syncfusion JavaScript Suite — это единственный инструментарий, который вам когда-либо понадобится для создания приложения. Он содержит более 80 высокопроизводительных, легких, модульных и адаптивных компонентов пользовательского интерфейса в одном пакете. Загрузите бесплатную пробную версию и оцените элементы управления уже сегодня.
Если у вас есть какие-либо вопросы или комментарии, вы можете связаться с нами через наши форумы поддержки, портал поддержки или портал обратной связи. Мы всегда рады Вам помочь!
Связанные блоги
- 8 лучших библиотек уведомлений JavaScript
- 10 советов и приемов по работе с объектами JavaScript
- Принципы JavaScript SOLID: как писать поддерживаемый код
- Интеграция планировщика JavaScript с PHP и MySQL для динамических CRUD-операций
Первоначально опубликовано на https://www.syncfusion.com 13 апреля 2023 г.