6 бесплатных библиотек для создания всплывающих подсказок на JavaScript

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

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

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

1. Tippy.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 имеет более 8,300 звезд на GitHub .

Особенности

• Размер 1,5 КБ после минификации и gzipped.
• Никаких дополнительных конфигураций не требуется.
• Поддерживает доступность с атрибутами aria-label.
• Только CSS. Без 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

Popper - это еще одна легкая библиотека JavaScript, которая позволяет легко создавать всплывающие подсказки и всплывающие окна. Она решает все основные проблемы, связанные с использованием чистого CSS для всплывающих подсказок, и сохраняет производительность приложения. Она широко используется в таких библиотеках, как Bootstrap, Foundation и Material UI. Popper имеет более 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 Tooltip

Bootstrap tooltip является частью фреймворка 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 - это широко используемая библиотека для позиционирования якорей. Она позволяет создавать плавающие элементы, такие как всплывающие подсказки и всплывающие окна, не загораживая при этом вид основного элемента. Размер Floating UI составляет всего 0,6 КБ после минификации и сжатия Brotli-компрессором. Однако он предоставляет такие удивительные возможности, как несколько вариантов размещения, перелистывание, стрелки и многое другое.

Floating UI имеет 2,5 миллиона еженедельных NPM загрузок и более 24 700 GitHub звезд.

Особенности

• Позволяет размещать всплывающие подсказки относительно любой координаты.
• Поддержка взаимодействий для React с крючками для таких событий, как click, focus, hover, typeahead и др.
• Динамически позиционирует стрелку всплывающей подсказки в центре элемента.
• Автоматически изменяет размер всплывающей подсказки, чтобы она оставалась на экране.
• Автоматически изменяет положение всплывающей подсказки, чтобы она оставалась на экране.

Установка

Вы можете легко установить 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

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

Особенности

• Поддерживает 12 различных позиций для отображения всплывающих подсказок.
• Поддерживает различные триггеры, такие как hover, click, focus и touch.
• Позволяет создавать всплывающие подсказки с изображениями, ссылками или пользовательским HTML-контентом.
• Поддерживает ряд анимаций и эффектов для улучшения пользовательского опыта.
• Создан с учетом требований производительности и доступности.
• Поддерживает интеллектуальное позиционирование в зависимости от области просмотра.

Установка

Вы можете легко установить Syncfusion Tooltip с помощью NPM следующим образом:

npm i @syncfusion/ej2-popups

Вы можете найти рабочую демонстрацию Syncfusion Tooltip на StackBlitz .

Примечание: Syncfusion предлагает бесплатную Community License , которая позволяет вам получить доступ к этому элементу управления бесплатно.

Выход

Вывод

Подсказка может помочь вам отобразить дополнительные сведения, когда пользователь наводит курсор на объект на вашем сайте. Она стала мощным элементом пользовательского интерфейса в современных веб-приложениях.

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

Syncfusion JavaScript suite - это единственный набор инструментов, который вам когда-либо понадобится для создания приложений. Он содержит более 80 высокопроизводительных, легких, модульных и отзывчивых компонентов пользовательского интерфейса в одном пакете. Скачайте бесплатную пробную версию и оцените элементы управления уже сегодня.

Похожие блоги

• 8 лучших библиотек уведомлений JavaScript
• 10 советов и трюков по работе с объектами JavaScript
• JavaScript SOLID Principles: Как писать ремонтопригодный код
• Интеграция JavaScript планировщика с PHP и MySQL для динамических CRUD операций

Первоначально опубликовано на https://www.syncfusion.com 13 апреля 2023 года.