Всплывающая подсказка с помощью CSS

Опубликовано: 5 июля 2016 Обновлено: 30 апреля 2019 24 комментария

В этом уроке вы узнаете, как сделать всплывающую подсказку при наведении на кнопку с помощью CSS. Текст всплывающей подсказки будет генериться за счёт значения пользовательского атрибута данных — data-tooltip="текст подсказки". Для работы потребуется подключить к странице шрифт FontAwesome и шрифт Open Sans от Google.

<a href="" data-tooltip="600Кб">
  <span>
    <em>Скачать</em><i class="fa fa-cloud-download"></i>
  </span>
</a>
tooltip-2
Рис. 1 Элементы всплывающей подсказки
*, *:before, *:after {
  box-sizing: border-box;
  transition: .4s ease-in-out;
}
a {
  text-decoration: none;
  font-family: 'Open Sans', sans-serif;
  text-align: center;
  color: white;
  position: relative;
  background: #3C4896;
  display: block;
  width: 200px;
  height: 50px;
  border-radius: 50px;
  border: 2px solid transparent;
  margin: 80px auto 0;
}
a:hover {
  background: white;
  border: 2px solid #3C4896;
}
/* скроем иконку загрузки до наведения на кнопку и текст "Скачать" после наведения на кнопку */
span {
  overflow: hidden;
}
span, em, i.fa {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  line-height: 46px; /* за вычетом границ кнопки */
}
em {
  top: 0;
  font-style: normal;
}
i.fa {
  top: 100%; /* смещаем вниз */
  font-size: 30px;
  color: #3C4896;
}
a:hover em { 
  top: -100%; /* смещаем вверх */
}
a:hover i.fa {
  top: 0;
}
/* делаем подсказку прозрачной и убираем её со страницы, чтобы она не появлялась при наведении на место, где она должна появиться */
a:before, a:after{
  position: absolute;
  opacity: 0;
  visibility: hidden;
}
/* стили для всплывающего блока с текстом */
a:before{
  content: attr(data-tooltip);
  width: 140px;
  height: 40px;
  line-height: 40px;
  background: #3C4896;
  border-radius: 5px;
  bottom: 90px;
  left: calc(50% - 70px);
}
/* стили для стрелки */
a:after {
  content: "";
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-top-color: #3C4896;
  bottom: 70px;
  left: calc(50% - 10px);
}
a:hover:before, a:hover:after {
  opacity: 1;
  visibility: visible;
  transition: .2s ease-in-out .4s; /* сделаем появление подсказки с задержкой */
}
/* добавляем эффект движения */
a:hover:before {
  bottom: 70px;
}
a:hover:after {
  bottom: 50px;
}

See the Pen QKLLkW by Elena (@html5book) on CodePen.

Поделиться: