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

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

Еще один урок по поводу всплывающих подсказок. Но в этом уроке мы не будем использовать jQuery. А, значит, мы не будем так сильно нагружать сайт и он будет загружаться на порядок быстрее. Как уже говорилось в прошлых уроках, подсказки позволяют сократить место текст на странице, расположив его более компактно.

Похожие уроки про всплывающие подсказки:

  • Красивая всплывающая подсказка при нажатии
  • Всплывающие подсказки CSS3
  • Красивое уведомление на CSS3
  • Простые подсказки на CSS3 и jQuery

Пример можно увидеть здесь:

Посмотреть примерСкачать

HTML часть

Необходимо скачать и подключить библиотеку Hint.css(она находится здесь):

1 &lt,link rel=stylesheet href=hint.css&gt,

Сейчас достаточно лишь прописать атрибут data-hint для тега &lt,span&gt,, внутри которого расположить текст, при наведении на который будет появляться подсказка:

1 2 3 4 … dui magna &lt,span data-hint=Описание 1&gt,&lt,strong&gt,vulputate&lt,/strong&gt,&lt,/span&gt, massa, euismod luctus metus eros ut velit. Fusce non mattis odio. …

CSS часть

Когда пользователь просматривает странице, то вряд ли он будет наводить курсор мыши на отдельные слова. Поэтому слова с подсказками лучше всего выделить соответствующим образом(например сделать их жирным цветом или курсивом):

1 2 3 4 5 6 7 8 spandata-hint border-bottom: 1px dotted #aaa, /* здесь задаете стиль для слова с подсказкой */ spandata-hint:hover cursor: pointer, /* здесь задаете стиль для слова с подсказкой при наведении */

Становится понятно, если добавить точечное подчеркивание для слов с подсказками:

Подсказки с точечным подверкиванием

Вывод

Классные подсказки, которые не нагружают сайт, так как не испольуют jQuery.

Рейтинг
( Пока оценок нет )
Понравилась статья? Поделиться с друзьями:
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: