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

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

Тултип: как это реализовать

Тултип может быть задан любому элементу на странице. Он может активироваться
3 способами:

1. Когда происходит клик по элементу.
2. Когда на элемент наводят курсор.
3. При фокусировке на элементе.

В основном тултип содержит поясняющий текст, однако помимо текста, он еще
может содержать изображения или ссылки.

Как различаются тултипы в зависимости от их активации

Тултип может активироваться несколькими способами, об этом мы уже написали. Но
при различных реализациях и сам он отличается собственными свойствами:

1. Когда тултип активируется по клику, то для его закрытия обязательно должен
   быть «крестик». Также такой тултип должен закрываться, когда происходит
   клик за его пределами.
2. Когда тутлтип активируется при наведении на элемент, то он появляется и
   исчезает через заданное время. Такая задержка нужна, чтобы пользователь
   успел перевести свой взгляд на тултип. Если пользователь наводит на него
   курсор, то он не должен исчезать, а оставаться на виду, пока курсор не
   будет передвинут.
3. Когда тултип открывается при фокусировки внимания на элементе, то он
   должен вести себя схоже как и при наведении. Такой тултип исчезает, когда на
   элементе больше нет фокуса.

Где располагается тултип?

Тултип – это всплывающая подсказка CSS, поэтому она должна быть небольшого
размера. Рекомендуют использовать прямоугольную форму до 250 рх по ширине.
Обычно в тултипах располагают небольшой текст, поэтому этого размера более чем
достаточно.

Правильное расположение тултипа — справа от элемента, к которому он
прикреплен. Бывает, что места не хватает, тогда его располагают в следующем
порядке по убыванию приоритета:

• справа;
• сверху;
• слева;
• снизу.

Тултип не должен закрывать важную информацию на странице — от этого тоже
может меняться его местоположение.

Реализуем тултип при помощи CSS

Всплывающая подсказка реализуется при помощи CSS довольно просто.
Показываем самый простой пример.
Для начала нам нужен элемент, которому зададим тултип, пусть этим элементом
будет какое-то словосочетание:

<span class=”tooltip” data-tooltip=”Я всплывающая подсказка CSS”> Наведи
на меня курсор</span>

Итак, мы взяли словосочетание «Наведи на меня курсор» обернули его в тег span.
В этом теге мы задали атрибут с текстом, который будет выводиться при наведении
на span: «Я всплывающая подсказка CSS». Чтобы все у нас получилось нужно
добавить следующий CSS в документ:
.tooltip {
border-bottom: 2px dotted #0055FX;
cursor: help;
}
.tooltip::after {
background: rgba(0, 0, 0, 0.8);
border-radius: 10px 10px 10px 5px;
box-shadow: 2px 2px 11px rgba(0, 0, 0, 0.6);
color: #FFF;
content: attr(data-tooltip); /* Основной код, который определяет, что будет
во всплывающей подсказке*/
margin-top: -31px;

opacity: 0; /* Добавляем прозрачности элементу… / padding: 5px 9px; position: absolute; visibility: hidden; / …скрываем элемент */

transition: all 0.5s ease-in-out; /* Добавляем немного анимации */
}

.tooltip:hover::after {
opacity: 1; /* Показываем элемент */
visibility: visible;
}
Примерно так выглядит тултип с полным набором стилей CSS, конечно его можно
организовать и по-другому — более сложными способами. А кто-то может знает
способы и проще. Мы решили применить свойство attr(), чтобы присвоить нашему
тултипу текст и показать его когда будет элемент будет :hover. С остальными
стилями проблем не должно возникнуть.

Возможно вам будет интересно почитать статью “Vue JS анимация. Примеры, разновидности анимации”

Заключение

Тултип при помощи CSS — это не очень сложно. Когда знаешь CSS, вариантов
реализации тьма тьмущая. Но бывают случаи, когда CSS практически, как лес
дремучий, а разбираться с этим нет времени, но при этом подсказку реализовать
надо. Что тогда делать?
Для таких случаев в HTML есть глобальный атрибут title, который работает по
принципу подсказки и показывает всплывающий текст. Его минус — сложно
стилизовать, то есть невозможно отрегулировать:

• шрифт,
• размер шрифта,
• размер самой подсказки.

Но в самых простых случаях такая реализация всплывающей подсказки может
выручить. К примеру такая подсказка может подойти, когда нужно добавить
всплывающую подпись к изображению при наведении на него.
Код будет следующим:
<body>

<div class=”image” data-title=”Всплывающая подсказка к
изображению”><img src=”images/myimage.jpg” alt=”мое фото”></div>
</body>
При такой реализации классу image вы сможете применить собственные стили, а к
самой подсказке нет.