Привет, друзья! Думаю на многих сайтах, подобных моему, вы могли видеть уроки про всплывающие подсказки на CSS. Сегодня я хочу поделиться вариантом такой подсказки, которая работает во всех современных браузерах.
На GitHub я нашел скрипт на CSS, который позволяет создавать всплывающие подсказки. Автор назвал библиотеку — HINT.css. Можете посмотреть данный проект на GitHub . Также ознакомьтесь с демонстрацией и исходниками.
HINT.css написан на чистом CSS. С его помощью вы можете создавать клевые подсказки для вашего веб-сайта. Вместо JavaScript и используются data-* атрибуты, псевдо элементы и CSS3 переходы для создания эффекта всплывания для подсказок.
Поддержка браузерами
- Chrome — Простой и всплывающий эффекты
- Firefox — Простой и всплывающий эффекты
- Opera — Простой эффект
- IE 10+ — Простой и всплывающий эффекты
- IE 8 & 9 — Простой эффект
Приступим
Давайте перейдем к самому интересному. Для того, чтобы создавать всплывающие подсказки, скачайте полную или сжатую версию hint.css (рекомендую использовать сжатую) и подключите ее к вашей странице в область head.
<link rel="stylesheet" href="hint.css"></link>
или
<link rel="stylesheet" href="hint.min.css"></link>
Подсказку можно выводить со всех 4 сторон. Для позиционирования подсказки используются классы:
hint--top , hint--bottom , hint--left , hint--right
Примерный синтаксис подсказки такой:
<span class="hint--bottom">hover me.</span>
Заместо hint--bottom вы можете вставить другой код для определения позиции вывода подсказки. Текст выводимой подсказки надо указать в атрибуте data-hint:
<span class="hint--bottom" data-hint="Thank you!">hover me.</span>
Цветные версии
Так же разработчик позаботился о цветных вариантах подсказки. Он добавил 4 цвета:
- Красный — для грозных предупреждений. Добавляйте класс
hint--error - Желтый — для предупреждений об ошибках. Добавляйте класс
hint--warning - Синий — для информационных сообщений. Добавляйте класс
hint--info - Зеленый — для сообщений об удачном свершении чего-либо. Добавляйте класс
hint--success
Пример использования цветов:
<span class="hint--bottom hint--success" data-hint="Ура!">Это подсказка успеха</span>
Дополнительно
Также вы можете сделать не скрытую подсказку. То есть она будет сразу показана после загрузки страницы. Для этого надо добавить класс hint--always
Если вам не нравятся прямые углы подсказки, есть вариант с закругленными углами. Для этого используйте класс hint--rounded
Вот еще пара примеров:
<span class="hint--right hint--always hint--rounded" data-hint="Текст подсказки">Текст</span>
Заключение
Больше примеров вы найдете в демонстрации и исходниках. Там так же представлен код для использования.
