Css анімовані підказки

Ще один урок з приводу спливаючих підказок. Але в цьому уроці ми не скористаємося jQuery. А, значить, ми не будемо так сильно навантажувати сайт і він буде завантажуватися на порядок швидше. Як вже говорилося в минулих уроках, підказки дозволяють скоротити місце текст на сторінці, розташувавши його більш компактно.

Схожі уроки про спливаючі підказки:

Красива підказка при натисканні
Підказки CSS3
Красиве повідомлення на CSS3
Простими підказками на CSS3 і jQuery

Приклад можна побачити тут:

Подивитися прімерСкачать

HTML частина

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

1	lt;link rel="Stylesheet" href="Hint.css"gt;

Зараз досить лише прописати атрибут data-hint для тега, усередині якого розташувати текст, під наведенні на який буде з`являтися підказка:

1234	...dui magna lt;span data-hint="Опис 1"gt; lt;stronggt; vulputatelt;/stronggt; lt;/spangt; massa, euismod luctus metus eros ut velit. Fusce non mattis odio ....

CSS частина

Коли користувач переглядає сторінці, то навряд чи він наводитиме курсор миші на окремі слова. Тому слова з підказками найкраще виділити відповідним чином (наприклад зробити їх жирним кольором або курсивом):

12345678

span[data-hint] {border-bottom: 1px dotted #aaa-/ * Тут задаєте стиль для слова з підказкою * /}span[data-hint]: hover {cursor: pointer-/ * Тут задаєте стиль для слова з підказкою при наведенні * /}