Создайте миниатюрные подсказки в чистом CSS с Wenk

С таким странным именем вы не ожидаете многого от Венка, бесплатная библиотека подсказок CSS. Тем не менее, это одна из самых маленьких библиотек, которую вы можете получить размером менее 1 КБ при сжатии.

Wenk использует чистый CSS с атрибутами data- * для создания всплывающих подсказок, которые можно изменить и позиционировать по своему вкусу. Лучше всего, это абсолютно бесплатная библиотека с доступным исходным кодом на GitHub,

Рекомендуемое чтение: создание анимированной всплывающей подсказки с помощью Hint.css

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

Эти легкие всплывающие подсказки очень просто добавить на ваш сайт. Вам просто нужно добавить файл Wenk.css в заголовок вашей страницы, который вы можете скачать с GitHub репо,

Или вы можете даже добавить CDN файл который размещен на CDN GitHub. Вот код для этого:

Или, если вы поклонник npm / bower, вы можете установить этот пакет из терминала,

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

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

Вот пример кода по умолчанию для подсказок Wenk:

Венк направо!

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

Одной из важных вещей является поддержка браузера. Все версии Chrome и Firefox должны работать нормально. То же самое с Opera 12+ и Opera Mini v8 +. Но IE8 и IE10, похоже, имеют проблемы с отображением этих подсказок. К счастью, их доля на рынке быстро падает, но перед использованием стоит подумать.
Я до сих пор поражаюсь, сколько вы можете сделать с таким небольшим количеством КБ. Библиотека Wenk является свидетельством современного развития веб-интерфейса и показывает, что многое может иметь большое значение.

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

Рекомендуемое чтение: сценарии подсказок: более 50 сценариев с AJAX, Javascripts, CSS и учебными пособиями