Skip to content

Всплывающие подсказки на чистом CSS

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

Заключение

Больше примеров вы найдете в демонстрации и исходниках. Там так же представлен код для использования.