«
»
WEBWordPressПолезные сайты

21 лучший TolTip плагин с открытым исходным кодом для всплывающих подсказок, созданные с использованием CSS, jQuery и JavaScript

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

1. Tooltipster

Это изображение настройки по умолчанию плагина для всплывающей подсказки jquery. Он показывает триггер с надписью hover и всплывающую подсказку с точкой «Привет, я подсказка».

Язык (и): jQuery
Что нам нравится в этом: Плагин для создания чистых, современных всплывающих подсказок со множеством возможных взаимодействий, тем и триггеров.

2. Tippy.js

Это изображение с демонстрационной страницы плагина всплывающей подсказки javascript, показывающее различные типы интерактивности всплывающей подсказки. Два варианта взаимодействия: наведите и нажмите.

Язык (и): JavaScript
Что нам нравится в этом: Настраиваемая библиотека всплывающих подсказок JS с множеством возможных взаимодействий, анимаций и тем. Может содержать HTML, и имеет массу функций, таких как раскладка и отслеживание курсора.

3. CSS Tooltip

Это анимация CSS всплывающей подсказки. Он показывает анимированную подсказку с выравниванием по правому краю. Кнопка перемещается, когда на нее наведен курсор и всплывающая подсказка.

Язык (и): CSS
Что нам нравится в этом: Простая подсказка с плавной анимацией, созданной с использованием HTML и CSS.

4. Тipr

Это скриншот очень простой демонстрационной страницы плагина jQuery. Он показывает простую подсказку над текстом.

Язык (и): jQuery
Что нам нравится в этом: Маленький, простой, плоский плагин всплывающей подсказки jQuery, который может появляться практически на любом элементе HTML.

5. Появление всплывающей подсказки – 

Tooltip

Это рисунок, показывающий анимацию всплывающей подсказки на социальных иконках. Он показывает плагин всплывающей подсказки, используемый на Facebook, Twitter, GitHub Pinterest и Dribble социальных иконок. Это подсказка с открытым исходным кодом, сделанная с помощью CSS

Язык (и): CSS
Что нам нравится в этом: Простая всплывающая подсказка с добавленной анимацией.

6. Grumble.js

Это изображение круглой выноски всплывающей подсказки в форме пузыря. Это необычная подсказка. Оранжевый пузырь говорит о пузыре Этот плагин подсказки сделан с jquery. Это говорит grumble.js

Язык (и): jQuery
Что нам нравится в этом: Анимированные и стилизованные всплывающие подсказки, которые можно вращать вокруг заданного элемента под любым углом.

7.

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

Язык (и): jQuery
Что нам нравится в нем: Сложная подсказка с несколькими обложками, местами размещения и анимацией, разработанная для «любой ситуации».

8. Tipped

Это очень простая подсказка javascript, имеющая мощный javascript api и встроенная поддержка Ajax. Он показывает скриншот всплывающей подсказки с вариантами да нет и двумя кнопками.

Язык (и): JavaScript
Что нам нравится в этом: Очень простое решение для всплывающей подсказки JavaScript с несколькими обложками, размерами и вариантами взаимодействия.

9. Microtip

Это анимированный GIF-файл демонстрационной страницы очень простой подсказки. Он показывает расположение всплывающей подсказки css с правым верхним левым нижним и другими параметрами, доступными в этой облегченной библиотеке всплывающих подсказок.

Язык (и): CSS
Что нам нравится в этом: Современная, минимальная и очень легкая библиотека подсказок только на CSS

10. Автоматические подсказки

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

Язык (и): Javascript
Что нам нравится в этом: Полностью стилизованные подсказки, которые можно автоматически позиционировать.

11. JBox

Это скриншот всплывающей подсказки, которая гласит: «У вас есть много вариантов позиционирования и анимации ваших jbox». Это плагин подсказки jquery, который полностью отзывчив.

Язык (и): jQuery
Что нам нравится в этом: мощный и гибкий плагин, который также имеет модальные окна и уведомления. Легкий, настраиваемый и отзывчивый.

12. Wenk

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

Язык (и): CSS
Что нам нравится в этом: Доступна легкая подсказка, созданная с помощью CSS. Может быть легко стилизован с использованием атрибутов или классов.

13. Crumble

Это интерактивный обзор возможностей для веб-сайтов или приложений, созданных с помощью плагина jquery с открытым исходным кодом. Подсказка выполнена в форме пузыря.

Язык (и): jQuery
Что нам нравится в этом:  Причудливый пузырьковый стиль визуально интересен. Требуется grumble.js (выше).

14. Intro.js

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

Язык (и): JavaScript
Что нам нравится в этом: Мощная, универсальная библиотека с описанием возможностей продукта для пошаговых инструкций. Никаких зависимостей, удобный.

15. PowerTip

Это плагин jquery tooltip для добавления всплывающих подсказок, которые являются мощным шаблоном пользовательского интерфейса, на веб-сайты. Эта подсказка показывает, что плагин поддерживает ссылки и сложные данные.

Язык (и): jQuery
Что нам нравится в этом: Этот плагин для всплывающей подсказки jQuery имеет удобную систему правил, которая позволяет отображать только одну подсказку за раз. Поддерживает добавление сложных данных в подсказки.

16. Панель инструментов.Js

Это пример панели инструментов всплывающей подсказки, созданной с помощью jquery. Это анимированный пример панели инструментов с бесплатным плагином и имеет три иконки.

Язык (и): jQuery
Что нам в нем нравится: Небольшой плагин jQuery, который создает всплывающие подсказки для веб-приложений и веб-сайтов.

17. Simptip

Это изображение простой подсказки CSS, созданной с помощью Sass. Это простой шаблон пользовательского интерфейса, который можно добавлять в разные позиции. Он показывает большой логотип всплывающей подсказки и небольшую подсказку поверх подчеркнутого текста, который говорит: «Да, я здесь»

Язык (и): CSS
Что нам нравится в этом: подсказка CSS сделана с помощью Sass, что довольно круто.

18. HubSpot подсказка

Это GIF всплывающей подсказки, которую вы можете скачать с Github. это сделано с javascript и css, и это построено на привязи и снижении. Это показывает подсказку инструмента в каждом из направленных положений, идущих вокруг коробки. Это анимация, показывающая, что эта библиотека js и css может создавать настраиваемые всплывающие подсказки с интеллектуальным позиционированием.

Язык (и): JavaScript, CSS
Что нам нравится в этом: JS и библиотека CSS для создания всплывающих подсказок. Построен на Tether and Drop.

19. Hopscotch

Это изображение описания продукта с подсказками. на логотипе есть всплывающая подсказка со следующей кнопкой, которая гласит «добро пожаловать в классики». эта всплывающая подсказка сделана с помощью javascript, и эту платформу можно использовать для добавления туров по продукту, используя в качестве входных данных объекты JSON.

Язык (и): JavaScript
Что нам нравится в этом: Фреймворк для добавления туров по продуктам (включая многостраничные туры). Работает, принимая объект JSON тура в качестве входных данных и предоставляет API, который позволяет разработчику контролировать рендеринг.

20. Darktooltip

это пример снимка экрана со всплывающей подсказкой, которая появляется при нажатии на кнопку и имеет две кнопки для подтверждения или отмены. Эта подсказка запроса поддерживает HTML-контент.

Язык (и): jQuery
Что нам нравится в этом: Простая настраиваемая подсказка, поддерживающая контент HTML.

21. Tipso

это пример всплывающей подсказки jquery, которая имеет два цвета и строку заголовка. это легкий и отзывчивый плагин jquery tooltip с анимацией css3. это также плагин WordPress Tooltip.

Язык (и): jQuery
Что нам нравится в этом: Легкий и отзывчивый плагин всплывающей подсказки jQuery с анимацией CSS3. Также существует как плагин для WordPress, что очень удобно.

Источник записи: https://www.appcues.com

Связанные записи
WordPressПлагины

Полный обзор лучших плагинов для календаря бронирования в WordPress

ElementorWordPressВсе для разработки плагиновПлагины

Создание пользовательских виджетов Elementor - правильный путь! | Бен Маршалл

WordPressПлагины

Swift Performance - Рекомендуемые настройки производительности | Полное руководство 2020

WordPressВсе для разработки плагиновВсе для разработки шаблонов

Настройка PHP CodeSniffer в PhpStorm с помощью стандартов кодирования WordPress | Келлен Мейс