HINT.css: подсказки на чистом CSS3 и HTML5 (без Javascript)

Подсказки в HTML-страницах в основном не требуют усилий от веб-разработчика, кроме как использования правильных атрибутов title. Затем title используется для отображения подсказки, и для других целей, вроде предоставления контента для экранных читалок. Говоря о применении подсказок, визуальное представление зависит от браузера, с помощью которого ваш сайт посещают. Разработчики, которым требуется больше контроля, уже давно перешли на решения, основанные на javascript. Kashagra Gour создал Hint.css, который предлагает нам отличную альтернативу на базе чистого кода CSS и HTML. Рекомендуем так же сервис, где можно найти шаблоны DLE, модули, создание сайтов, уроки и многое другое.

Hint.css – атрибуты данных, CSS3-переходы, псевдо-элементы и параметр content

Hint.css позволяет организовать относительно простые, но стильные подсказки к любому элементу. В первую очередь мы поговорим о тексте, ссылках и изображениях. Чтобы отобразить подскажу, вам надо будет добавить как минимум 2 последовательных класса к выбранному элементу. Первый класс всегда должен называться hint – он будет изначально запускать таблицы стилей, а второй будет определять расположение подсказки, и отвечать за ее визуальное представление. Вы можете добавить сколько вам угодно классов и комбинаций. Если вы хотите указать расположение, а также цвет подсказки, то вы можете просто использовать три класса следующим образом:

<span class="hint  hint--top  hint--error" data-hint="This is an error tooltip">Oh man! You are gonna self-destruct in 5 sec.</span>

И это в результате даст нам следующее:


Используя 'hint', мы привязываем Hint.css к элементу. Класс 'hint--top' располагает подскажу над span-элементом, 'hint--error' отвечает за оформление в красном цвете. Следующий атрибут данных, 'data-hint', отвечает за то, чтобы текст отображался при наведении.

Атрибуты данных HTML5 позволяют нам включать различные данные в валидный исходный код. Данные внутри этих атрибутов не будут отображаться посетителю, и не будут влиять на дизайн. Тем не менее, они будут включены в страницу, и их можно будет прочесть и обработать при помощи специализированных скриптов и методов. В нашем случае, в роли скрипта выступает Hint.css.

На данный момент Hint.css имеет в арсенале определения 'hint--top', 'hint--bottom', 'hint--left' и 'hint--right', которые используются для позиционирования подсказок. Более того, существует определение цветов для большинства статусов сообщений, включая 'hint--error', 'hint--info', 'hint--warning' и 'hint--success'. Если вы хотите, чтобы ваши подсказки всегда оставались видимыми – то есть, чтобы их не надо было запускать только при наведении курсора, – вам нужно добавить класс 'hint--always'.

Так как Hint.css представлен на чистом css-коде, этот набор свойств может быть с легкостью расширен опытными разработчиками. Вы можете добавить цвета и другие визуальные аспекты. Достаточно опытные разработчики с хорошей фантазией могут еще дальше отодвинуть рамки. Hint.css был разработан при помощи Sass, и вместе со скриптом доступен исходный код Sass. Hint.css можно скачать с Github под лицензионным соглашением MIT, что означает, что вы можете свободно использовать скрипт как в личных, так и в коммерческих проектах.

Если вы не знакомы с подсказками, то таблицы стилей этого скрипта точно для вас. Вы можете использовать их в образовательных целях. Вы научитесь многим интересным вещам, если хорошенько просмотрите эти таблицы. Hint.css – это 100% рекомендация от нас. Единственное что вам нужно знать перед тем, как мы отпустим вас экспериментировать над проектами, это тот факт, что css-переходы, примененные к псевдо-элементам работают только в Firefox. Другие браузеры просто не способны отображать переходы, о которых мы тут говорили.

Ссылки:
* HINT.css – библиотека для создания подсказок на CSS
* HINT-Github-репозиторий | chinchang / hint.css
* Link-Titles | W3C