О сайтеПравилаКонтакты
  • Крипто
  • Новости
  • Статьи
  • Люди
  • Теги
» Статьи » Разработка » Всплывающие подсказки на чистом CSS
  • Инструменты
  • Заработок
  • Раскрутка
16 апреля 2015 . Антон Кулешов

Всплывающие подсказки на чистом CSS

Всплывающие подсказки – это форма нашего диалога с пользователем, а для того чтобы пользователи получали удовольствие, пользуясь нашим сайтом-ресурсом, надо весьма потрудиться над юзабилити.

Конечно, вы можете заявить, что не всем проектам необходим функционал всплывающих подсказок. Но опять же, интуитивно понятный интерфейс – достижение долгой и кропотливой работы, и если сайт развивается и обрастает новым функционалом, вам не обойтись без всплывающих подсказок. Ведь пользователю необходимо указать на новые возможности и рассказать, как ими правильно пользоваться, т.е. проявить уважение к посетителю вашего сайта, так как он здесь главный и именно для него все это и создавалось.

Современные возможности 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), чтобы перекрыть его бордер.

strelochka-ukazatel

.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;
}

Изучаем демо, скачиваем исходники, пользуемся!

#Всплывающие подсказки
8 590 2
Антон Кулешов
Делаем всплывающее сообщение используя CSS и jQuery Подписываем фотографии jQuery end Page Box для всплывающих сообщений Реализуем всплывающие сообщения без использования JavaScript Как сделать всплывающие подсказки, разбираемся с WebUI Popover
Сергей
Сергей
18 ноября 2018
Спасибо за статью, очень помогла разобраться с подсказками. Есть небольшой вопрос. Скажите как сделать что бы стрелка-указатель отображалась сверху подсказки. bottom на top в свойствах поменял. Но как теперь перевернуть стрелку?)
Антон Кулешов
Антон Кулешов
18 ноября 2018
Приветствую! Для того чтобы повернуть стрелки можно воспользоваться свойством в CSS - transform: rotate(180deg).

Аккордеон меню на CSS

Adipoli – красивое представление ваших изображений

Популярное
1 Пишем парсер контента на PHP2 Лучший способ прижать футер используя flexbox3 Кликджекинг как соцфишинг, пишем скрипт для получения id пользователя вконтакте4 Пишем первый модуль для 1С-Битрикс с использованием ядра D75 Делаем подгрузку контента при прокрутке страницы
Обратите внимание