Всплывающие подсказки помогут украсить ваш сайт, а также сделать его отзывчивым и современным. В данном примере есть несколько вариантов, среди которых можно выбрать самый подходящий вашему проекту!
Подсказки позволяют заинтересовать пользователя, а также сократить используемую область на сайте, тем самым достаточно ёмко и элегантно оформить всю необходимую информацию. Такой вариант идеально подходит к продающей странице, где необходимо максимально точно и кратко представить информацию пользователю.
К тому же, всплывающие подсказки могут быть незаменимым вариантом в крупном проекте, в котором усложнена навигация по сайту. Именно подсказки помогут решить эту проблему: к примеру, пользователь может навести на фразу или элемент сайта, а ему будет выведена краткое её обозначение. Удобно, не правда ли?
Я представляю вам очень удобный и функциональный пример, который реализован только на чистом HTML и CSS3, что несомненно является большим плюсом и гарантирует беспроблемную установку на проект любой сложности. К тому же, в нём используются современные SVG-иконки, о которых я уже писал в статье про Dashicons в WordPress.
Стоит отметить, что всплывающие подсказки в данном примере являются адаптивными (как и сами примеры), что сокращает ваше потраченное время. Именно поэтому я считаю этот вариант самым оптимальным и удобным для всех нас.
Как установить всплывающие подсказки
Как я уже говорил — установка не составит труда, так как никаких «танцев с бубном» здесь не будет.
ПРИМЕР СКАЧАТЬ
Давайте рассмотрим все тонкости установки всплывающих подсказок на примере «Растянутая». Для начала разберемся с HTML-документом, а именно с блоком <head>:
|
1 2 3 4 5 6 7 |
<head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="css/normalize.css" /> <link rel="stylesheet" type="text/css" href="css/demo.css" /> <link rel="stylesheet" href="fonts/font-awesome-4.2.0/css/font-awesome.min.css"> <link rel="stylesheet" type="text/css" href="css/tooltip-bloated.css" /> </head> |
Строка 2 — уже привычный нам мета-тег для корректного отображения на Iphone. Если не знаешь что это — читай мою статью про медиа-запросы.
Строка 3-4 — подключаем необходимые стили. demo необходим для нашего демо.
Строка 5 — подключаем файл стилей для шрифта наших примеров. Точнее он необходим для корректного отображения наших SVG-иконок.
Строка 6 — подключаем таблицу стилей конкретно к нашему примеру («Растянутая»).
Собственно, всё что нам необходимо — мы подключили. Остаётся дело за малым — разобраться со структурой нашего <body>:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<body class="color-5"> <div class="container"> <div class="codrops-top clearfix"> <span class="right"><a title="На сайт" target="_blank" href="http://www.drogin.ru"><span>Вернуться на сайт</span></a></span> </div> <div class="content"> <header class="codrops-header"> <h1>Оформление подсказок</h1> <nav class="codrops-demos"> <a href="index.html">Классик</a> <a href="round.html">Круг</a> <a href="curved.html">Изогнутая</a> <a href="sharp.html">Острая</a> <a class="current-demo" href="bloated.html">Растянутая</a> <a href="box.html">Блок</a> <a href="comic.html">Забавная</a> <a href="line.html">Линия</a> <a href="flip.html">Разворот</a> </nav> </header> <div class="dummy dummy-menu dummy-menu-icons"> <ul> <li><a class="tooltip" href="#"><i class="fa fa-fw fa-car"></i><span class="tooltip-content">Автомобиль</span></a></li> <li><a class="tooltip" href="#"><i class="fa fa-fw fa-bicycle"></i><span class="tooltip-content">Велосипед</span></a></li> <li><a class="tooltip" href="#"><i class="fa fa-fw fa-plane"></i><span class="tooltip-content">Пассажирский самолет</a></li> <li><a class="tooltip" href="#"><i class="fa fa-fw fa-bus"></i><span class="tooltip-content">Автобус</span></a></li> <li><a class="tooltip" href="#"><i class="fa fa-fw fa-fighter-jet"></i><span class="tooltip-content">Истребитель</span></a></li> </ul> </div> </div> </div> </body> |
Всё, что находится до 20 строки — нас не должно волновать, так как в том блоке находится навигация и прочие элементы, которые необходимы для удобного пользования демо. Нам интересно всё, что находится в блоке с классом dummy.
Не стоит удалять какой-либо из классов в примере, так как это приведёт к неминуемой ошибки. Если вам необходимо как либо изменить стиль любого из элементов, не прибегая к редактированию подключенных нами ранее библиотек — следует дописать свой класс или идентификатор. Как вы уже заметили, структура подсказки незамысловатая — всё реализована с помощью тегов списка ul и li. Не нужно изменять её, так как ни к чему хорошему это не приведёт.
Единственное, что следует редактировать:
|
1 |
<span class="tooltip-content">Автобус</span> |
Данный фрагмент кода я изъял из нашего списка <li>. Именно данный фрагмент отвечает за вывод текста нашей подсказки. Вместо «Автобус» можно написать то, что вам необходимо — и готово! Аналогично изменяем и элементы списка <li> — вот вам и готовая качественная всплывающая подсказка без единого скрипта.
Вывод
Таким образом, мы получили отличный вариант всплывающих подсказок, реализованных только на HTML и CSS3. Хотелось бы отметить, что мы рассмотрели лишь 1 вариант оформления подсказок, а в демо их целых 9! Ассортимент самых разных подсказок придет по вкусу каждому веб-мастеру и не останется без внимания ваших пользователей.
Процесс установки и редактирования всплывающей подсказки не займет более 10 минут, но взамен мы получаем:
- повышение поведенческого фактора;
- ёмкое оформление;
- возможность повышения конверсии.
Это незаменимый вариант для продающей страницы, так как сочетает в себе все самые лучшие черты, которые характерны качественным проектам, способные работать по своему назначению лучше других аналогов.
