Сегодня мы перейдем к библиотекам, которые помогут вам создать функциональные подсказки с помощью HTML CSS Javascript для веб-сайтов с множеством красивых дизайнов и эффектов!
Что такое всплывающая подсказка?
Всплывающая подсказка - это элемент, который помогает вам комментировать дополнительную информацию, когда пользователь наводит курсор на объект где-нибудь на сайте. На мой взгляд, это поможет новичкам на веб-сайте четко понять функцию с помощью такой дополнительной информации. Обычно он отображается как атрибут title в теге a, но с помощью библиотеки всплывающих подсказок вы можете легко создать красивую всплывающую подсказку и добавить больше функциональности на свой сайт.
Tippy.js
Tippy.js - мощная библиотека, которая помогает нам легко создавать всплывающие подсказки. Вы можете гибко использовать и расширять функциональные возможности всплывающих подсказок для объектов HTML, такие как установка тем для всплывающих подсказок, вложение всплывающих подсказок, изменение положения отображения ... Настройка также очень проста, вы можете установить через npm, ярд или использовать CDN для использования непосредственно для HTML-страницы (Он также имеет библиотеку поддержки), поддержка React тоже). Кроме того, в нем также есть подробные инструкции о том, как добавлять или удалять функции для программы, когда они применяются на веб-сайте, и примеры для каждого конкретного случая. Атрибут, который мне очень нравится. Он позволяет загружать контент (могут быть изображения, текст…) через AJAX, когда пользователь наводит курсор на значок HTML объекта.
Чаевые
Tipped - это открытая библиотека ссылок, основанная на javascript, которая позволяет создавать всплывающие подсказки с красивым и адаптивным дизайном на экранах нескольких устройств. Он отображает множество типов информации различную информацию за счет поддержки JSON, API, AJAX, JS ... Вы также можете гибко редактировать всплывающую подсказку в соответствии с веб-сайтом с помощью дополнительных функций, таких как цвет, настройка размера, всплывающая подсказка времени отображения ...
Поппер
POPPER - это библиотека, написанная на javascript размером всего около 3 КБ, чтобы помочь вам повысить скорость веб-сайта, сохранив при этом функции, необходимые для всплывающей подсказки. Он часто используется в буквах. Текущие популярные библиотеки, такие как Bootstrap, Foundation, Material UI… На мой взгляд, он помогает нам решать проблемы. Решает общую проблему во всплывающих подсказках, которые определяют положение элемента и визуализируют его как можно лучше на экране. разные экраны устройств.
Hint.css
Hint.css - это библиотека ссылок с открытым исходным кодом, созданная с помощью CSS, размером всего около 1,5 КБ. Используя CSS, вы можете применять его ко многим различным типам веб-проектов. И установка также очень проста. Просто загрузите и затем вызовите класс с нужной функцией (вы можете увидеть пример в разделе демонстрация, пожалуйста). Hint.css работает во всех современных браузерах и теперь реагирует на несколько экранов.
Microtip
Microtip также представляет собой библиотеку для создания всплывающих подсказок на основе CSS, и ее размер составляет всего около 1 КБ. Если вам просто нужно создать чистую компактную всплывающую подсказку с функцией, которая позволяет вам настраивать положение отображения всплывающей подсказки и применима ко многим различным типам проектов, то я думаю, что вам следует выбрать эту библиотеку.
Tootik
Tootik также представляет собой библиотеку CSS, которая упрощает создание всплывающих подсказок. Вы можете установить множество способов, таких как npm, CDN, bower или download. Вам просто нужно вызвать data-tootik= . attribute "" в теге HTML, чтобы сразу создать всплывающую подсказку. Также, если вы хотите установить больше Для других функций, можно использовать атрибут data-tootik-conf="". На его демонстрационной странице мы можем добавить нужные нам свойства, и соответствующий код будет автоматически выведен. Так просто-напросто, не правда ли!
Intro.js
Intro.js - это библиотека javascript, которая позволяет создавать учебные пособия о функциях или вещах, которые следует помнить пользователям, когда они впервые посещают наш веб-сайт. Потому что это открытый код ссылки, поэтому вы можете использовать его для всех различных веб-проектов. Он также очень легкий, всего около 10 КБ с файлом Javascript и 2,5 КБ с файлом CSS. Кроме того, он также совместим со многими современными веб-браузерами, такими как Google Chrome, Firefox, Opera…
Toolbar.js
Toolbar.Js - это библиотека jquery, которая позволяет создавать всплывающую подсказку, которая легко отображает панели инструментов. Он включает в себя множество полезных функций, таких как возможность выбрать правильный цвет для веб-страницы дизайна, настроить положение отображения панелей инструментов или разрешить добавление эффектов движения с помощью всплывающей подсказки…
Венк
Wenk - это компактная библиотека для отображения всплывающих подсказок, которая может использоваться для CSS, LESS, SCSS… С очень маленьким размером файла около 733 байта в сжатом виде. Вы можете легко настроить или добавить функции функций с помощью атрибута data в теге HTML или с помощью класса для объекта.
Balloon.css
Balloon.css - это библиотека CSS, которая содержит все функции, необходимые для всплывающей подсказки, такие как отображение положения, размер, цвет, размер шрифта, значок добавления… Что мне нравится в нем, так это то, что у каждой функции есть кошелек. . подробный пример с соответствующим фрагментом кода. Вам просто нужно выбрать ту подсказку, которая вам подходит, и вставить ее внутрь. Программа готова к использованию. Он будет вызываться через атрибут в теге HTML и класс внутри этого объекта. Однако у него также есть ограничение, заключающееся в том, что вы не можете использовать его для самозакрывающихся тегов, таких как _6 _...
Всплывающая подсказка
Всплывающая подсказка - это библиотека, которая помогает отображать всплывающую подсказку в любом месте объекта, как показано вверху слева, вверху справа, внизу слева, внизу справа… Вам просто нужно скачать файл и вызвать нужное место в process Средство настройки всплывающей подсказки в Javascript уже может определить, как отображать всплывающую подсказку для этого объекта. Однако его ограничение заключается в том, что для использования вам необходимо загрузить на свой компьютер 4 файла, включая 3 файла js и 1 файл css.
Типсо
Tipso - это библиотека, созданная с помощью JQuery, которая помогает создавать всплывающие подсказки с множеством полезных функций. полезно и красиво. Требуется использовать JQuery версии 1.7. Вы легко добавляете функции, вызывая свойства во время настройки всплывающей подсказки, такие как цвет текста, цвет фона, текст заголовка и т. Д., Отображение содержимого через AJAX… Что мне нравится в этом, так это комбинация с Animate.css, позволяющая создавать множество красивые эффекты движения для всплывающей подсказки.
Всплывающая подсказка jBox
Protip
PowerTip
Симптип
Наконечник D3
Резюме:
Благодаря этому, я надеюсь, что статья предоставит вам полезные библиотеки всплывающих подсказок для разработки и веб-дизайна, и если у вас есть какие-либо вопросы, просто отправьте электронное письмо, и я отвечу как можно скорее. Я надеюсь, что вы, пожалуйста, продолжайте поддерживать сайт, чтобы я мог писать больше хороших статей. Хорошего дня!
