Лого www.SiteHere.ru

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

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

Еще один урок по поводу всплывающих подсказок. Но в этом уроке мы не будем использовать 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.

Успехов!

CSS анимированные всплывающие подсказки 5.00/5 (100.00%) 1 голос(ов)

Понравилась статья - расскажи друзьям! :)

1 комментарий к записи
  • ZeroXor

    Очень интересно! А ведь и вправду можно же использовать только CSS!!! 😎 😎 😎 — вот и все, что я могу по этому поводу сказать. И как я сам до этого не додумался?! ➡

     

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *