40+ полезных скриптов подсказок с CSS, JavaScript и jQuery
Интересный элемент пользовательского интерфейса, всплывающие подсказки (также называемые информационными подсказками), заставляет маленькое поле появляться, когда курсор мыши находится над определенным текстом или изображением с информацией относительно элемента, находящегося над. С точки зрения пользовательского опыта, всплывающие подсказки предоставляют пользователям самый быстрый и простой источник информации без необходимости ничего нажимать.
Хотя самый простой способ добавить всплывающие подсказки к вашему тексту - использовать тег HTML или TITLE =””, ALT =””. Тем не менее, есть некоторые действительно крутые Подсказки дизайнов и стилей, которые вы можете создавать с помощью JavaScript и CSS используя подсказки скриптов. Давайте взглянем.
CSS
Balloon.css - Balloon - это библиотека CSS состоит из SasS и LESS показать интерактивную подсказку. Содержание и положение всплывающей подсказки настраиваются через данные- приписывать. Вы можете показать подсказку слева, справа или слева-справа. Вы можете даже добавить Emojis к содержанию. Balloon.css можно установить через NPM и загрузить его из CDNJS..
Simptip - Сделано с SasS, позволяющим перенастроить и перекомпилировать код в соответствии с вашими требованиями. Положение и содержание всплывающей подсказки настраиваются с помощью имени класса и данная подсказка приписывать. Симптип доступен как Пакет NPM, Пряжа и Бауэр.
Hint.css - Hint.css, одна из популярных библиотек CSS для отображения всплывающей подсказки, используется многими популярными веб-сайтами, такими как Fiverr, Webflow и Tridiv. В отличие от двух других библиотек CSS, Hint.css использует ария-этикетка Вы можете настроить размер и цвет через имена классов используя методологию БЭМ. Hint.css доступен на NPM, Bower и CDNJS.
микроострия - Еще одна замечательная библиотека CSS для создания всплывающей подсказки “доступность” в виду, Microtip использования ария-этикетка держать содержание всплывающей подсказки и данные- атрибут для настройки размера и положения всплывающей подсказки.
Он использует переменную CSS, которая позволяет настраивать всплывающую подсказку с помощью обычного CSS-файла. Переменные CSS уже поддерживаются во многих веб- и мобильных браузерах. Микротип доступен в виде NPM, пакета Yarn и UNPkg CDN..
Венка - Это всего лишь 733 байта. Суперлегкая библиотека написано в суперсовременном CSS с использованием CSSNext, LESS и SCSS так что можете настроить и перекомпилировать стили так, как вам нравится. Wenk можно загрузить с NPM, Yarn и следующих бесплатных сервисов CDN: rawgit.com и unpkg.com.
Tooltippy - Другая легкая библиотека CSS будучи размером всего около 1 КБ. Tooltippy включает в себя несколько готовых тем для оформления всплывающей подсказки. Он написан с помощью препроцессоров CSS с именем Stylus. Смотрите инструкцию о том, как вы можете расширить или настроить эти темы.
ElegantTips - Эта библиотека поставляется с несколькими готовые темы это можно изменить с помощью предоставленных имен классов. В отличие от других библиотек, которые опираются на HTML5 данные- или ария-этикетка Атрибут ElegantTips требует добавления дополнительного элемента для формирования всплывающей подсказки. Это позволяет вам добавлять буквально любой контент к всплывающей подсказке, кроме простого текста.
Tootik - Эта библиотека CSS предоставляет не только таблицу стилей в формате CSS, LESS и SasS, но и простой в использовании графический интерфейс для настройки всплывающей подсказки. Вы можете просто скопировать и вставить HTML, созданный этим инструментом. Это так просто.
VanillaJS
TippyJS - Работает на Popper.js, TippyJS поставляется с обилие опций для настройки всплывающей подсказки. Мы можем настроить анимацию, стрелку всплывающей подсказки, ширину, размер, тему и многое другое. Он также предоставляет функции обратного вызова, с помощью которых вы можете выполнить функцию, когда подсказка показана и скрыта. Эти функции делают TippyJS одной из наших мощных библиотек JavaScript в нашем списке для создания всплывающей подсказки..
Darsain Tooltip - Эта библиотека предоставляет базовую реализацию всплывающей подсказки. Тем не менее, он предоставляет широкие возможности для настройки поведения подсказок, а также набор имен классов для изменения внешнего вида всплывающей подсказки. Всплывающая подсказка хорошо работает в старых браузерах, таких как IE9 и, при необходимости, IE8 с некоторыми изменениями..
Bubb - Bubb может хорошо подойти для опытных пользователей JavaScript. Используя его обширные API, кроме отображения простого текста, Вы можете программно добавить более сложный HTML-контент в подсказку. Это довольно круто; Вы можете обратиться к документации примеров.
огнестрельное оружие - Содержит техническую абстракцию для создания чего-то, что “попса”, как всплывающая подсказка, всплывающее окно и выпадающие. TippyJS использует его как основу библиотеки и использует такие громкие имена в Интернете, как Bootstrap, Microsoft и Atlassian..
YY Tooltip - В отличие от других библиотек, YY Tooltip не требует добавления HTML-элемента или атрибутов. Он полностью работает с JavaScript, а его содержимое, положение и цвета определены в объекте, а не в элементе HTML. Идеально для использования в сочетании с полноценным веб-приложением JavaScript.
Position.js - Еще одна отличная библиотека JavaScript для создания всплывающих подсказок, Position.js предоставляет графический интерфейс для настройки функции и просто скопировать и вставить сгенерированный там код. Position.js может использоваться вместе с React.js или Vue.js.
Безет Подсказка - Эта библиотека предоставляет 14 вариантов отображения всплывающей подсказки; такие как на право, оставил, низ, левый центр, правый конец, Дно-центр, и т.д. Кроме того, он также достаточно умен, чтобы он мог отрегулируйте положение всплывающей подсказки в зависимости от доступного пространства окружающий всплывающую подсказку. Проверьте демо.
MouseTip - Эта библиотека JavaScrtipt создаст всплывающая подсказка, которая будет перемещаться вдоль позиции курсора. Подсказка настроена с нестандартным mousetip- атрибут вместо использования HTML5 данные- приписывать. Мышь подсказка доступна как модуль NPM.
Internetips - Очень похоже на MousetTip, всплывающую подсказку, сгенерированную этой библиотекой следует за курсором. Все настраивается через объект JavaScript вместо HTML и атрибуты также созданы для современных браузеров. Это легкий и быстрый.
СИП - Библиотека JavaScript для всплывающей подсказки с отличная совместимость с браузерами. Он совместим с IE8, полностью настраивается с помощью параметров, и вы можете добавить всплывающую подсказку к любому элементу даже на IMG (элемент изображения).
Bubblesee - легкая библиотека JavaScript, которая обеспечивает простую функциональность “подсказка”. Легко использовать библиотеку JavaScript без сложных опций для настройки вывода. Файл Sass предоставляется, если вы хотите изменить внешний вид всплывающей подсказки. Проверьте демо.
Tipfy - Встроенный с современным синтаксисом JavaScript, ES6, Типфы размером всего 2 КБ. Библиотека предоставляет две версии файлов: tipfy.min.js предоставление сценария современный синтаксис ES6, а также tipfy.es5.min.js если вам нужна совместимость со старыми браузерами. Оно использует данные- атрибут для настройки всплывающей подсказки; Данные-tipfy сторона, например, используется, чтобы установить направление всплывающей подсказки, и использовать данных tipfy-текст атрибут для добавления содержимого всплывающей подсказки.
JQuery
Tooltipster - Эта библиотека предоставляет широкие возможности для настройки почти всего, например, тема, анимация, сенсорная поддержка, контент, триггер открытия и закрытия, и т.д. Он также предоставляет пользовательский прослушиватель событий и обратные вызовы, позволяющие разработчикам расширять всплывающую подсказку с помощью пользовательских функций. Кроме того, будучи плагином jQuery, всплывающая подсказка будет работать в более старых браузерах, таких как IE6, в зависимости от версии jQuery использовался.
Protip - Еще один обширный плагин jQuery, Protip поддерживает 49 позиций, HTML для содержания всплывающей подсказки, поддержки значков, пользовательских обратных вызовов, и многое другое. Protip предоставляет графический интерфейс, позволяющий легко настроить подсказку.
PowerTip - Этот плагин jQuery также предоставляет Options и API, предоставляя разработчикам ряд различных способов реализации всплывающих подсказок. Поддерживает клавиатурная навигация; сделать всплывающее окно при навигации по элементам с табуляция клавиатура. PowereTip - это доступный как модуль NPM. Может использоваться с RequireJS и Browserify.
Доступный Aria Tooltip - Плагин jQuery со встроенной функцией специальных возможностей, всплывающая подсказка предназначен для отображения диалогового окна с заголовком, многострочным текстом и кнопкой закрытия. Это один из его в нашем списке.
TipsJS - Простой плагин jQuery, но он имеет довольно отличительные черты. содержание всплывающей подсказки устанавливается с данная подсказка атрибут. Более того, мы можем также обернуть содержимое специальными символами для форматирования содержимого, аналогичного форматированию Markdown. Мы можем использовать * сделать содержание жирным, ~ курсивом и ^ для заголовка.
Темная подсказка - Эта библиотека предоставляет некоторые действительно полезные функции для включения всплывающей подсказки. Например, мы можем добавить кнопка подтверждения - Да и Нет, затемните фон, пока отображается подсказка, и добавьте элементы HTML к содержанию. Я думаю, что вы действительно должны проверить демо-страницу.
Aria Tooltip - Еще одна подсказка со встроенной функцией доступности, этот плагин jQuery, совместимый с WAI-ARIA 1.1. Это отзывчиво таким образом, что вы можете обеспечить разные конфигурации для разных размеров области просмотра. Aria Tooltip доступен в виде модуля NPM с именем трет-ария-подсказка.
toolbar.js - В то время как другой плагин jQuery может показывать только простой текст или HTML-контент во всплывающей подсказке, это Плагин jQuery создает панель инструментов. Всплывающая подсказка будет содержать две или более ссылок со значком, который обычно выполняет действие над щелчок, как и любая панель инструментов. Ознакомьтесь с документацией и примерами.
VueJS
V-подсказка - V-Tooltip - это компонент Vue.js, работающий на Popper.js. Это обеспечивает новая директива названа v-подсказка который может быть добавлен к любому элементу для создания всплывающей подсказки. v-подсказка может содержать всплывающую подсказку или параметры. Помимо обычая v-подсказка директива, вы также можете добавить всплывающую подсказку с v-поповер составная часть. С этим компонентом вы можете добавить более сложный контент в подсказку с компонентом Vue.js или HTML.
Vue-Bulma Tooltip - Компонент Vue.js для создания всплывающей подсказки на основе Bulma UI Framework. Эта библиотека является частью компонента Vue Bulma. Но компонент всплывающей подсказки доступен в виде модуля NPM с именем вя-Бульм-подсказка что вы можете использовать это как отдельные компоненты.
Вьет-Directive-подсказка - В целом он похож на компонент V-Tooltip на основе Popper.js и предоставляет ту же директиву под названием v-подсказка. Тем не менее, это, кажется, не обеспечивает v-поповер составная часть.
Вью-Типпи - Эта библиотека оборачивает Tippy.js в компонент Vue.js. Он имеет собственную директиву Vue.js под названием v-неустойчивый это работает как атрибут HTML; мы можем добавить контент для всплывающей подсказки или опции для ее настройки. Это также делает пользовательский компонент Vue.js в содержании всплывающей подсказки, используя HTML вариант.
VueJS-поповер - Пользовательский Vue.js с пользовательской директивой под названием v-поповер и два пользовательских компонента, а именно
Вью-Hint - Плагин Vue.js, который оборачивает Hint.css. Особенности плагина v-подсказка-CSS директива для добавления всплывающей подсказки. Это приносит тот же набор параметров, что и Hint.css, так что вы можете добавить их как объект JavaScript или модификатор Vue.js.
ReactJS
Реагировать радость - Компонент React для отображения набора всплывающих подсказок, которые будут помогите новым пользователям ознакомиться с вашим новым приложением.
React Floater - Эта библиотека упаковывает Popper.js в компонент React с именем Floater, поэтому она обладает теми же замечательными функциями, что и Floater. Вы можете добавить всплывающую подсказку и всплывающее окно, а также вы можете поиграть с этим компонентом через эту песочницу.
React Autotip - Простой компонент React с функцией автоматического позиционирования, eact Autotip автоматически корректировать положение всплывающей подсказки когда доступное пространство вокруг него меняется.
Реагировать Типпи - Построен на вершине Tippy.js и Popover.js. Эта библиотека представляет подсказка компонент, который Вы можете включить в свое приложение React.
React Hint - Компонент React, расширяющий Hint.css. Компоненты добавляют несколько функций, которые не доступны в Hint.css, такие как автоматическое позиционирование, задержка и функция обратного вызова.
Больше
Ember Tooltips - Компонент Ember.js для создания всплывающих подсказок, он построен поверх Popper.js. Компонент также разработан с учетом доступности и постоянно совершенствуется, чтобы соответствовать требованиям 508 по этому вопросу..
D3 Совет - плагин D3.js. D3.js - это библиотека JavaScript для визуализации данных, таких как диаграммы, карты, диаграммы и т. Д. Этот плагин позволяет отображать всплывающую подсказку поверх этих данных..
