Подсказки для html элементов не вызывают больших трудностей в использовании у веб-разработчиков. Нужно всего лишь приметить атрибут title и мы получим вывод подсказки при наведении. Стиль такой подсказки будет зависеть от браузера пользователя и не отличаться красотой. Поэтому веб-разработчики придумали массу вариантов как сделать более привлекательные и функциональные решения. Реализовать эксклюзивные подсказки можно по-разному. Большинство использует в своих проектах javascript, но если знания javascript хромают можно легко обойтись и css3 альтернативой.
Существует много библиотек для создания подсказок. Одна из таких hint.css, разработанная Kashagra Gour.
Использования этой библиотеки не вызовет проблем даже у начинающего веб-разработчика, а более опытные смогут легко расширить библиотеку собственными цветовыми и анимационными вариантами.
Использовать подсказки очень просто. Для начала нужно скачать саму библиотеку отсюда и подключить к документу. Чтобы отобразить подсказку, вам надо будет добавить как минимум 2 последовательных класса к выбранному элементу. Первый класс всегда должен называться hint – он будет изначально запускать таблицы стилей, а второй будет определять расположение подсказки, и отвечать за ее визуальное представление. Вы можете добавить сколько вам угодно классов и комбинаций.
На данный момент Hint.css имеет в арсенале определения 'hint--top' — для подсказок над, 'hint--bottom' — для подсказок под, 'hint--left' — для подсказок слева и 'hint--right' — для подсказок справа. Более того, существует определение цветов для большинства статусов сообщений, включая 'hint--error', 'hint--info', 'hint--warning' и 'hint--success'. Если вы хотите, чтобы ваши подсказки всегда оставались видимыми – то есть, чтобы их не надо было запускать только при наведении курсора, – вам нужно добавить класс 'hint--always'.
Следующий атрибут данных, 'data-hint', отвечает за то, какой текст будет отображаться при наведении.
Создадим подсказку для ссылки. Для этого будем использовать информационную подсказку hint--info и положения снизу hint--bottom. Вот пример кода:
Увидеть демо можно здесь.
Hint.css — удобная библиотека для создания подсказок
Существует много библиотек для создания подсказок. Одна из таких hint.css, разработанная Kashagra Gour.
Использования этой библиотеки не вызовет проблем даже у начинающего веб-разработчика, а более опытные смогут легко расширить библиотеку собственными цветовыми и анимационными вариантами.
Использование
Использовать подсказки очень просто. Для начала нужно скачать саму библиотеку отсюда и подключить к документу. Чтобы отобразить подсказку, вам надо будет добавить как минимум 2 последовательных класса к выбранному элементу. Первый класс всегда должен называться hint – он будет изначально запускать таблицы стилей, а второй будет определять расположение подсказки, и отвечать за ее визуальное представление. Вы можете добавить сколько вам угодно классов и комбинаций.
На данный момент Hint.css имеет в арсенале определения 'hint--top' — для подсказок над, 'hint--bottom' — для подсказок под, 'hint--left' — для подсказок слева и 'hint--right' — для подсказок справа. Более того, существует определение цветов для большинства статусов сообщений, включая 'hint--error', 'hint--info', 'hint--warning' и 'hint--success'. Если вы хотите, чтобы ваши подсказки всегда оставались видимыми – то есть, чтобы их не надо было запускать только при наведении курсора, – вам нужно добавить класс 'hint--always'.
Следующий атрибут данных, 'data-hint', отвечает за то, какой текст будет отображаться при наведении.
Пример
Создадим подсказку для ссылки. Для этого будем использовать информационную подсказку hint--info и положения снизу hint--bottom. Вот пример кода:
<a href="#">
<span class="hint hint--bottom hint--info" data-hint="О, это подсказка">Наведи на меня</span>
</a>
Увидеть демо можно здесь.