TechBlogSD - Все для WordPress и WEB разработки
WEB и WordPress инструкции, новости, обзоры тем и плагинов

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

3 754

В данной записи был собран список лучших плагинов для всплывающих подсказки с открытым исходным кодом, созданных с помощью 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

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