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

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

Всплывающие подсказки на сайте бывают очень нужны, если необходимо, например, выполнить целевое действие — но не совсем понятно, к чему приведет нажатие на том или ином элементе управления.  В самом простом виде всплывающую подсказку можно увидеть при наведении курсора мыши на ссылку, у которой задан атрибут «title». Сейчас мы создадим всплывающие подсказки на CSS.

Всплывающие подсказки на CSS - подсказка HTML title

Здесь всего лишь отображается текст сообщения, что данная ссылка связана с сервисом Twitter. Однако CSS предоставляет намного больше возможностей по оформлению красивых подсказок, которые покажем немного ниже. Для их реализации не нужно ничего подключать. Достаточно лишь внести правки в ваши таблицы стилей.

Всплывающая подсказка средствами HTML — через атрибут «title» ссылки

<a href="#" title="Всплывающая подсказка на HTML">Наведите курсор мыши!</a>

Вот такой результат получится:
Наведите курсор мыши!

Всплывающая подсказка средствами стилей CSS

 

Вот такой код нужно написать на CSS — для реализации подсказки:

.image {
display: inline-block;
position: relative;
}
.image:hover::after {
content: attr(data-text); /* Выводим текст всплывающей подсказки*/
position: absolute;
left: 0; right: 0; bottom: 0px; /* Положение всплывающей подсказки */
z-index: 1; /* Отображаем подсказку поверх других элементов */
background: rgba(0,255,102,0.6); /* Цвет (RGB) и степень его прозрачности */
color: #fff; /* Цвет текста */
text-align: center; /* Выравниваем текст по центру */
font-family: Arial, sans-serif; /* Гарнитура шрифта */
font-size: 11px; /* Размер текста подсказки */
padding: 5px 10px; /* Поля */
border: 1px solid #333; /* Параметры рамки */
}

 

Всплывающая подсказка над ссылкой на CSS

Бывает и такое, когда нужно сделать красивую подсказку для ссылки, в этом нам поможет CSS — сейчас сделаем цветную всплывающую подсказку. В этом примере подсказка отображается над ссылкой.

Код HTML:

<a href="https://web-tutor.net/" title="Текст подсказки." class="podskazka">Наведите курсор на ссылку</a>

Стили CSS:

 .podskazka{
    display: inline;
    position: relative;
}
.podskazka:hover:after{
    background: #333;
    background: rgba(204,102,0,.8);
    border-radius: 5px;
    bottom: 26px;
    color: #fff;
    content: attr(title);
    left: 20%;
    padding: 5px 15px;
    position: absolute;
    z-index: 98;
    width: auto;
}
.podskazka:hover:before{ /* Добавляем стрелочку внизу блока всплывающей подсказки */
    border: solid;
    border-color: #cc6600 transparent;
    border-width: 6px 6px 0 6px;
    bottom: 20px;
    content: "";
    left: 50%;
    position: absolute;
    z-index: 99;
}

и вот такой вот результат получается:
Наведите курсор на ссылку

 

Всплывающая подсказка под ссылкой на CSS

А теперь давайте выведем подсказку под ссылкой. Для этого сделаем следующее:

Код HTML:

<span class="tooltip">
    <a href="https://web-tutor.net/">Наведи курсор на ссылку</a>
    <span class="classic">Текст всплывающей подсказки</span>
</span>

Код CSS:

.tooltip { 
  position: relative;     /* Делаем элемент родительским для всплывающих подсказок */
  cursor: help;
}
.tooltip span {
  position: absolute;     /* Выводим элемент из потока */
  margin-left: -30000px;  /* И прячем далеко за краем экрана */
  background-color: rgba(0,0,153,.8); /* Фон всплывающего блока*/
  color: #fafafa;             /* Цвет текста */
  padding:10px;                 /* Отступы */               
  -webkit-border-radius: 5px; /* Закругляем уголки */
  -moz-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;
}
.tooltip:hover span {     /* При наведении */
  margin-left: 0;         /* Возвращаем из далекого заэкранного края блок на место */
  width: 250px;           /* Задаем ширину */
  z-index: 1000;          /* Помещаем на самый верх */
                          /* Позиционируем относительно родительского блока */
  top:30px;               /* Отступ сверху */  
  left:20px;              /* Отступ слева */          
}
.tooltip span:after{
  content: '';            /* Добавили контент */ 
  width:0;                /* Спрятали его, превратив в 0 */
  height:0;
  border-bottom: 10px solid #000099;  /* Нижним бордером задаем цвет и высоту треугольника */
  border-right: 30px solid transparent; /* Правым - ширину треугольника вправо */
  position: absolute;     /* Позиционируем относительно родительского блока */
  top:-10px;
  left:10px;
}

И вот такой результат получается после вышеприведенных действий:

Наведи курсор на ссылку
Текст всплывающей подсказки

Просмотров: 1519

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Технологии WEB

CMS

Расширения

Сервисы