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

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

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

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

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

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

HTML часть

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

1

<link rel="stylesheet" href="hint.css">

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

1
2
3
4

...
dui magna <span data-hint="Описание 1"><strong>vulputate</strong></span> massa, 
euismod luctus metus eros ut velit. Fusce non mattis odio.
...

CSS часть

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

1
2
3
4
5
6
7
8

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

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

Вывод

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

Успехов!