Удобный, интуитивно понятный и со вкусом оформленный сайт — это главная цель любого веб-разработчика. Но что делать, если мощный функционал Вашего проекта значительно усложняет пользовательский интерфейс, и без подсказок посетителю будет ложно сориентироваться? Или Вы создаете сайт с легким элегантным дизайном и не хотите загромождать его лишней информацией, но без этой «информации» не обойтись?
Одним из наиболее часто применяемых способов увеличить информативность сайта, не навредив при этом дизайну, являются всплывающие подсказки.
Предпосылки
Современные js-технологии предлагают нам широкий выбор готовых решений, но в этот раз речь пойдет не о них.
Сегодня мы рассмотрим построение кросс-браузерных всплывающих при наведении подсказок на чистом CSS.
Зачем изобретать велосипед, спросите Вы? Ведь в HTML есть атрибут title, позволяющий выводить подсказку при наведении. Но вся соль в том, что темизация такой подсказки не представляется возможной. Такой порядок вещей приводит нас к необходимости самим создать всплывающие подсказки.
Создаем всплывающую подсказку сами
Итак, всплывающая подсказка. Для лучшего понимания материала, предлагаю учиться на рабочем примере. Напишем простой HTML код:
CSS:
<a href="#" class="tooltip"><span class="customInfo"> <img src="../css/image/info.jpeg" alt="Информация" height="48" width="48" /> <em>Акция!</em> Заказав этот товар, вы получаете бесплатную доставку по Украине!</span> Купить</a>
Как видим, у нас есть ссылка «Купить» с классом .tooltip, который в дальнейшем поможет нам управлять поведением всплывающей при наведении подсказки (почему именно ссылка — читайте подпункт «Важно»). Внутри нее размещаем span в котором будет содержаться выводимая информация. Для придания «современности» дизайна, добавлена картинка. В нашем примере картинка лежит в директории "../css/image/ " относительно html страницы.
Теперь зададим базовую стилизацию.
CSS:
.tooltip { position: relative; cursor: help; display: inline-block; text-decoration: none; color: #222; outline: none; } .tooltip span { visibility: hidden; /*прячем подсказку*/ position: absolute; bottom: 30px; z-index: 999; width: 280px; margin-left: -127px; padding: 10px; opacity: .9; /*устанавливаем прозрачность*/ background-color: darkturquoise; /*Задаем цвет фона*/ text-align: justify; font-weight: bold; } .tooltip:hover { border: 0; /* Фиксим появление бага в IE6*/ } .tooltip:hover span { visibility: visible; /*Задаем поведение: отобразить при наведении*/ }
Обратите внимание на строчку
cursor: help;
при наведении на ссылку, стандартный системный курсор изменяет свой вид, и тем самым подсказывает пользователю, что сейчас он получит дополнительную информацию.
Вот что у нас получилось:
Такая всплывающая подсказка будет работать даже в древних браузерах. Но мы не будем отставать от прогресса, и используем возможности современных браузеров.
Создадим линейный градиент при помощи linear-gradient, и зададим border-radius для округления углов блока. Для придания эффекта объемности добавим тень для текста и подсказки в целом.
Вставляем внутрь .tooltip span следующий код.
CSS:
border: 3px solid mediumturquoise; background-image: -webkit-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0)); background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0)); background-image: -ms-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0)); background-image: -o-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0)); background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0)); -moz-border-radius: 4px; border-radius: 4px; -moz-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset; box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset; text-shadow: 0 1px 0 rgba(255,255,255,.4);
Сравним полученный результат с предыдущим:
При желании, опять-таки для придания объемности, можно визуально вынести картинку за пределы подсказки. Текст внутри тоже можно немного причесать.
CSS:
.tooltip img { position: absolute; left: -24px; top: -24px; float: left; } em {text-align: center; display: block; font-weight: bolder; }
Как для учебного примера, то получилось, в принципе, неплохо. Но я уверен, что у вас получится значительно лучше!
Но что делать, если Вам необходимо визуально указать, с какого именно элемента выскочило сие чудо? Дорисуем стрелочку при помощи псевдоэлементов.
CSS:
.tooltip span:before, .tooltip span:after { content: ""; position: absolute; z-index: 1000; bottom: -7px; left: 50%; margin-left: -8px; border-top: 8px solid darkturquoise;/*цвет стрелочки*/ border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 0; } .tooltip span:before { border-top-color: mediumturquoise; /*обрамление стрелочки*/ bottom: -8px; }
При оформлении стрелочки, обратите внимание на комментарии, они помогут Вам быстро настроить цветовую схему.
Вот пример черной стрелки с золотым обрамлением:
Важно!!!
- Кросс-браузерность. Всплывающие подсказки такого типа корректно работают во всех современных браузерах (начиная с IE6, Fx-4, Op-9.5, Sf-4, Cr).
Если вы создаете подсказки со стрелочками, то для IE6-7 придется эмулировать псевдоэлементы before, after.
- Почему ссылка? Дело в том, что IE6 относительно корректно отрабатывает свойство :hover лишь в том случае, когда оно применяется к ссылке. Если вы не оптимизируете свой сайт под такую древность — можете использовать другие теги (например, span).
- При желании, Вы можете использовать js-код для расширения функционала и/или задания особых эффектов (например, медленное появление и исчезновение и т.д.).
Общие замечания
- Обратите внимание на фон страницы, на которой мы выводили подсказки. Он не является однообразным, и на нем полупрозрачная подсказка приобретает некую изюминку. Учтите этот момент при подборе фона документа.
- Вас могло заинтересовать, зачем элементу span было присвоено класс «customInfo». Дело в том, что на своем сайте Вам может понадобится несколько типов информационных подсказок, отличающихся цветовой схемой, градиентом и т.д. Для этого удаляем из «.tooltip span» свойства, которые мы хотим изменить, например
border: 3px solid mediumturquoise; opacity: .9; background-color: darkturquoise;
и оформляем новый класс:
.customWorring { border: 3px solid red; opacity: .8; background-color: pink; }
Таким образом мы получим розовую полупрозрачную подсказку с красной окантовкой. Изменим картинку в теле ссылки на красный восклицательный знак, — и предостерегающая подсказка готова.
- Ну и напоследок, личное мнение автора — подсказки на чистом CSS — это вещь! Вам не нужно играться с готовыми js-скриптами, подключать внешние файлы, ваши странички не теряют скорости загрузки. А самое главное — кросс-браузерная всплывающая подсказка создана собственными руками, и пределов для ее кастомизации практически нет.
