Tooltips на чистом CSS


Hint.css – легкий файл стилей, который написан на SASS и использует только CSS и HTML. Работает без использование JavaScript.
Как сообщают разработчики, данный скрипт работает только в последних версиях популярных браузеров.

Как внедрить подсказки на сайт:

  • Скачать скрипт и подключить его
  • У элементов data-hint прописать текст самой подсказки, которая будет выводиться на сайте
  • Указать hint для нужных вам элементов
  • Указать нужно вам положение: hint—top, hint—right, hint—bottom, hint—left

Если вы хотите изменить цвет подсказки, то это легко делается с помощью классов:

— hint—error — красный
— hint—info — коричневый
— hint—warning — синий
— hint—success — зелёный

А если вы хотите, чтобы подсказка отображалась всегда, а не только при наведении, то используйте у элементов класс:

— hint—always

Скачать файл стилей тултипа можно на гитхабе



Поделиться с друзьями:

Другие публикации:



Написать комментарий через:

 
       
  • ВКонтакте
  •        
  • Локальный блог
  •  
 
 

Ваш отзыв

Имя *

Почта (скрыта) *

Сайт

Напишите цифрами двa вoceмь двa *

Сообщение

Один отзыв на «Tooltips на чистом CSS»

  1. Mons пишет:

    Действительно полезная фича. Сами стили довольно мало весят и при этом внедренные в текст не ломают имеющиеся стили )

 
Статьи пользователей на ArtKiev Design Studio