Всплывающие подсказки – это форма нашего диалога с пользователем, а для того чтобы пользователи получали удовольствие, пользуясь нашим сайтом-ресурсом, надо весьма потрудиться над юзабилити.
Конечно, вы можете заявить, что не всем проектам необходим функционал всплывающих подсказок. Но опять же, интуитивно понятный интерфейс – достижение долгой и кропотливой работы, и если сайт развивается и обрастает новым функционалом, вам не обойтись без всплывающих подсказок. Ведь пользователю необходимо указать на новые возможности и рассказать, как ими правильно пользоваться, т.е. проявить уважение к посетителю вашего сайта, так как он здесь главный и именно для него все это и создавалось.
Современные возможности HTML5 и CSS3 позволяют реализовать всплывающие подсказки без использования сторонних библиотек, плагинов и скриптов, что упрощает структуру сайта и уменьшает нагрузку на браузер, и, как следствие, наши страницы грузятся быстрее.
Цель всего вышеизложенного заключалась в СЕО-оптимизации данной статьи (хотя я и писал то, что реально думаю), чтобы вы – смогли когда-либо отыскать данную статью на страницах яндекса или гугла, теперь же приступим к технической реализации наших всплывающих подсказок HTML. Для этого создаем следующую структуру:
<a href="#" class="tooltip">
Текст
<span>Подсказка</span>
</a>
В ссылку помещаем нужный нам фрагмент текста, при наведении на который, мы хотим увидеть подсказку, сама же подсказка у нас будет спрятана в теге span. К слову: я выбрал данные теги потому, что мне так привычнее создавать структуру страницы, вы же спокойно можете использовать любые другие теги, главное – правильно селектировать ниже указанные стили CSS.
.tooltip{
position: relative; /* позиционируем */
display: inline-block;
background: #eaeaea;
color: #222;
text-decoration: none;
cursor: help;
outline: none;
}
.tooltip span{
position: absolute; /* позиционируем */
z-index: 999; /* выдвигаем на передний план */
visibility: hidden; /* временно скрываем */
left: 50%;
bottom: 30px;
width: 230px;
padding: 10px;
margin-left: -127px;
border: 2px solid #ccc;
background-color: #ddd;
background-image: -moz-linear-gradient(top, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.5)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
background-image: -o-linear-gradient(top, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
background-image: -ms-linear-gradient(top, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); /* IE10+ */
background-image: linear-gradient(to bottom, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); /* W3C */
opacity: .9;
border-radius: 4px;
-moz-border-radius: 4px;
box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
-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;
text-shadow: 0 1px 0 rgba(255,255,255,.4);
}
Нашему тегу-обертке с классом tooltip задаем position со значением relative, а внутреннему тегу position со значением absolute для того, чтобы разместить её относительно родительского элемента. Z-index-ом выдвигаем её на передний план страницы и скрываем до надобности при помощи visibility - hidden. Все остальные стили – это ваше дизайнерское оформление.
Далее простая механика: меняем свойство visibility у дочернего элемента с hidden на visible, при наведении курсора на элемент с классом tooltip.
.tooltip:hover{
border: 0; /* используем если необходим IE6 fix */
}
.tooltip:hover span{
visibility: visible; /* отображаем подсказку */
}
Не забываем про главную нашу красивость – стрелочку-указатель, причем, её реализовываем без использования каких-либо картинок, что, согласитесь очень удобно, особенно если в будущем нам придется корректировать дизайн страницы. Для этого применяем псевдо-селекторы before и after, которые и будут отрисовывать стрелочку. Не забываем их с позиционировать и выдвинуть на 1 выше основного блока (свойство z-index), чтобы перекрыть его бордер.
.tooltip span:before,
.tooltip span:after{
content: ""; /* во избежание коллапса */
position: absolute; /* позиционируем */
z-index: 1000; /* на 1 больше */
bottom: -7px;
left: 50%;
margin-left: -8px;
border-top: 8px solid #ddd;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 0;
}
.tooltip span:before{
border-top-color: #ccc;
bottom: -8px;
}
Вот и всё, подсказка готова. Осталось только помесить её в нужные места сайта. Если хотим использовать несколько подсказок с разными стилями, то лучшим вариантом будет добавить к toolip ещё один класс, где переопределить необходимые стили.
<a href="#" class="tooltip green-tooltip">
...
</a>
и добавляем CSS:
.green-tooltip span{
color: #fff;
border-color: #228b22;
background-color: #008000;
}
.green-tooltip span:after{
border-top-color: #008000;
}
.green-tooltip span:before{
border-top-color: #228b22;
}
Изучаем демо, скачиваем исходники, пользуемся!