Как сделать прикольную всплывающую подсказку на 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, особо благодарен за репост.