Как сделать всплывающую подсказку на css | WAVIFUN.RU

Как сделать прикольную всплывающую подсказку на css

как сделать всплывающую подсказку css

Привет, друзья, сегодня хочу поделиться тем, как сделать интересную всплывающую подсказку при помощи чистого css без применения javascript. Сразу хочу сказать, что в примерах мы будем применять псевдоэлементы «::before и ::after». Если вы не знаете,что это такое, вы можете прочитать статью «Таинственные псевдоэлементы в css before и after. Отличие от псевдоклассов«, которую я писал ранее. Для того, чтобы у нас получилась некая логика в подсказках, нам необходимо сделать пункты меню, например, в изображениях или иконках, чтобы пользователь хотел навести на пункт меню, чтобы узнать что он (пункт меню) означает, увидев подсказку. Как использовать иконки в меню можно узнать в статье «Как быстро вставить иконку на сайт с помощью html».

Итак, для начала нам нужна HTML разметка:

<div class="menu">
<ul>
 <li><a href="#">\260E</a></li> 
 <li><a href="#">\2710</a></li>
 <li><a href="#">\262D</a></li>
</ul>
</div>

Символы \260E, \2710, \262D генерируют иконки меню

Далее работаем с css. Здесь нам понадобится псевдоэлемент ::after или ::before. Мы можем использовать любой из них так, как для отображение всплывающих подсказок будет использоваться абсолютное позиционирование. Вообще наша задача заключается в том, чтобы изначально скрыть псевдоэлемент, который генерирует саму подсказку, а при наведении на иконку, т.е. на ссылку, эта подсказка отобразится.

В принципе, мы можем применять любые стили на всплывающих подсказках. Всё будет зависеть от вашей фантазии. Еще один пример, который я хотел бы вам показать, это всплывающая подсказка с применением анимации в CSS. Как работать с анимацией, вы можете узнать в статье: Анимация при наведении на блок css

На этом, пожалуй, закончим. Если у вас есть вопросы, задавайте в комментариях. Если вам понравилась статья, ставьте LIKE, особо благодарен за репост.

12.03.2018
445
0
0 0 голос
Рейтинг статьи
Подписаться
Уведомить о
guest

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.

0 Комментарий
Межтекстовые Отзывы
Посмотреть все комментарии

Так вы сможете получать новые статьи первыми

Pin It on Pinterest