Еще один урок по поводу всплывающих подсказок. Но в этом уроке мы не будем использовать 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 | spandata-hint border-bottom: 1px dotted #aaa, /* здесь задаете стиль для слова с подсказкой */ spandata-hint:hover cursor: pointer, /* здесь задаете стиль для слова с подсказкой при наведении */ |
Становится понятно, если добавить точечное подчеркивание для слов с подсказками:
Вывод
Классные подсказки, которые не нагружают сайт, так как не испольуют jQuery.