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

Здесь вы узнаете, как сделать всплывающие подсказки при помощи CSS.

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

Базовые всплывающие подсказки

Создание всплывающих подсказок, которые появляются при наведении мыши на элемент:

<style>
/* Контейнер подсказки */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* Подчеркивание из точек */
}

/* Текст подсказки */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
 
  /* Позиционирование текста подсказки */
  position: absolute;
  z-index: 1;
}

/* Показываем подсказку при наведении мыши на контейнер подсказки */
.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>

<div class="tooltip">Наведи на меня курсор
  <span class="tooltiptext">Текст подсказки</span>
</div>

Объяснение примера

HTML: Используем контейнерный элемент (например, <div>) и добавляем ему класс tooltip. При наведении пользователем курсора мыши на этот элемент <div>, будет показываться текст всплывающей подсказки.

Текст подсказки помещается в линейный элемент (например, <span>) с class="tooltiptext".

CSS: В классе tooltip используется свойство position:relative, которое нужно для позиционирования текста подсказки (position:absolute). См. следующий пример, чтобы узнать, как задать позицию подсказки.

Класс tooltiptext содержит стили самой подсказки. По умолчанию она скрыта и появляется только при наведении курсора мыши на контейнер подсказки. Мы также добавили некоторые базовые стили: ширина 120px, черный цвет фона, белый цвет текста, центрирование текста и отступы 5px сверху и снизу.

CSS свойство border-radius добавляет закругленные углы у плашки с текстом подсказки.

Селектор :hover используется для отображения текста подсказки, когда пользователь наводит курсор мыши на элемент <div> с class="tooltip".

Позиционирование подсказки

В следующем примере подсказка выводится справа (left:105%) от текста контейнера (<div>). Также, обратите внимание на свойство top:-5px, которое помещает подсказку по центру элемента контейнера. Мы используем число 5, потому что у текста подсказки установлен верхний и нижний отступы в 5px. Если увеличить эти отступы, также следует увеличить значение свойства top, чтобы подсказка оставалась по центру (если это то, что вам нужно). То же самое относится и к подсказке, располагаемой слева.

.tooltip .tooltiptext {
  top: -5px;
  left: 105%;
}

.tooltip .tooltiptext {
  top: -5px;
  right: 105%;
}

Следующий пример, если вы хотите, чтобы подсказка отображалась сверху или снизу. Обратите внимание, что мы используем свойство margin-left со значением -60px. Это нужно, чтобы отцентрировать текст подсказки над/под текстом контейнера. Это значение является половиной от ширины подсказки (120/2 = 60).

.tooltip .tooltiptext {
  width: 120px;
  bottom: 100%;
  left: 50%;
  margin-left: -60px; /* Используем половину от ширины (120/2 = 60) для центрирования */
}

.tooltip .tooltiptext {
  width: 120px;
  top: 100%;
  left: 50%;
  margin-left: -60px; /* Используем половину от ширины (120/2 = 60) для центрирования */
}

Стрелочки у плашки подсказки

Чтобы сделать стрелочку с определенной стороны плашки подсказки, добавьте "пустой" контент при помощи псевдоэлемента ::after. Сами стрелочки создаются при помощи свойств border.

В следующем примере показано, как добавить стрелочки под плашкой подсказки:

.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  top: 100%; /* Внизу подсказки */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: black transparent transparent transparent;
}

Объяснение примера

Задаем позицию стрелочки внутри плашки подсказки: свойство top: 100% разместит стрелочку внизу подсказки; свойство left: 50% центрирует стрелочку.

Свойство border-width определяет размер стрелочки. Если нужно изменить его значение, также необходимо изменить значение свойства margin-left аналогичным образом. Это удерживает стрелочку в центре.

Свойство border-color используется для придания контенту формы стрелочки. Мы задаем для верхней рамки черный цвет, а для остальных - прозрачный. Если все рамки будут черными, то мы получим просто черный квадрат.

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

.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  bottom: 100%;  /* Вверху подсказки */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent black transparent;
}

Следующий пример демонстрирует, как добавить стрелочку слева от подсказки:

.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  top: 50%;
  right: 100%; /* Слева от подсказки */
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent black transparent transparent;
}

Следующий пример демонстрирует, как добавить стрелочку справа от подсказки:

.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  top: 50%;
  left: 100%; /* Справа от подсказки */
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent transparent black;
}

Плавное появление подсказки (Анимация)

Если вы хотите создать эффект плавного появления подсказки, то вы можете воспользоваться CSS свойством transition вместе со свойством opacity. Это позволяет сделать так, что элемент будет менять прозрачность от полностью прозрачный (невидимый) до полностью непрозрачный (видимый) за определенное время (в нашем примере за 1 секунду):

.tooltip .tooltiptext {
  opacity: 0;
  transition: opacity 1s;
}

.tooltip:hover .tooltiptext {
  opacity: 1;
}