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 высокопроизводительных, легких, модульных и адаптивных компонентов пользовательского интерфейса в одном пакете. Загрузите бесплатную пробную версию и оцените элементы управления уже сегодня.

Если у вас есть какие-либо вопросы или комментарии, вы можете связаться с нами через наши форумы поддержки, портал поддержки или портал обратной связи. Мы всегда рады Вам помочь!

Связанные блоги

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