CSS подсказки

Создание tooltip с помощью CSS (Tooltip).

Пример: tooltip

Пример

Когда пользователь наводит указатель мыши на элемент, tooltip обычно используется для предоставления дополнительной информации о содержимом:

Верх Текст подсказки
Правый Текст подсказки
Низ Текст подсказки
Левый Текст подсказки

Основной tooltip

Создайте инструмент tooltip, который отображается при наведении курсора на элемент:

Пример

<style>
/* Контейнер tooltip */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* Если нужно показывать пунктирную линию под подвспомогательным текстом */
}
/* Текст tooltip */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  /* Локализация текста tooltip - см. примеры ниже */
  position: absolute;
  z-index: 1;
}
/* Показывать текст tooltip при наведении курсора на контейнер tooltip */
.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>
<div class="tooltip">Наведите курсор на меня
  <span class="tooltiptext">Текст tooltip</span>

Попробуйте сами

Example explanation

</div>

HTML: используйте контейнерный элемент (например, <div>) и добавьте "tooltip"

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

внутренних элементов (например, <span>).

CSS: tooltip класс используетposition:relativeдля размещения текста подсказки (position:absolute

）。Обратите внимание: о том, как разместить подсказку, см. следующий пример. tooltiptext

класс сохраняет фактический текст подсказки. По умолчанию он скрыт и становится видимым при наведении мыши (см. ниже). Мы также добавили некоторые базовые стили: ширина 120 пикселей, черный фон, белый текст, текст по центру и верхний и нижний отступы по 5 пикселей (padding). CSS border-radius

свойство добавляет закругления к тексту подсказки.Когда пользователь перемещает мышь на <div> с классом «tooltip», :hover

Выборщик для отображения текста подсказки.

В этом примере подсказка находится справа от текста, над которым можно навести (left:105%）。Кроме того, обратите внимание наtop:-5px Используется для размещения подсказки в центре ее контейнерного элемента. Мы используем цифру 5, потому что у текста подсказки есть верхний и нижний отступы по 5 пикселей. Если вы увеличите отступы, пожалуйста, также увеличьте top Значение свойства, чтобы убедиться, что оно остается в центре. Если вы хотите разместить подсказку слева, это также применяется.

Правая подсказка

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

Результат:

Переместите указатель мыши над этим текстом Текст подсказки

Попробуйте сами

Левая подсказка

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

Результат:

Переместите указатель мыши над этим текстом Текст подсказки

Попробуйте сами

Если вы хотите, чтобы подсказка находилась вверху или внизу, посмотрите на следующий пример. Обратите внимание, что мы используем отрицательное значение 60 пикселей для левого отступа (margin-left). Это необходимо для того, чтобы выровнять подсказку по центру с текстом, над которым можно навести. Это значение равно половине ширины подсказки (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), чтобы выровнять подсказку по центру */
}

Результат:

Переместите указатель мыши над этим текстом Текст подсказки

Попробуйте сами

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

Чтобы создать стрелку, которая будет отображаться на указанной стороне подсказки, добавьте «пустой» текст в подсказку и используйте класс pseudo-element ::after and content properties. The arrow itself is created using the border. This makes the tooltip look like a bubble.

This example demonstrates how to add an arrow to the bottom of the tooltip:

Bottom arrow

.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  top: 100%; /* At the bottom of the tooltip */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: black transparent transparent transparent;
}

Результат:

Переместите указатель мыши над этим текстом Текст подсказки

Попробуйте сами

Example explanation

Position the arrow inside the tooltip:top: 100% Place the arrow at the bottom of the tooltip.left: 50% This will center the arrow.

Note:border-width The attribute specifies the size of the arrow. If you change this setting, also change margin-left Change the value to the same value. This will center the arrow.

border-color Used to convert content into an arrow. We set the top border to black and the rest to transparent. If all sides are black, the final result will be a black square box.

This example shows how to add an arrow to the top of the tooltip. Please note that this time we set the bottom border color:

Top arrow

.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  bottom: 100%;  /* At the top of the tooltip */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent black transparent;
}

Результат:

Переместите указатель мыши над этим текстом Текст подсказки

Попробуйте сами

This example demonstrates how to add an arrow to the left of the tooltip:

Left arrow

.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  top: 50%;
  right: 100%; /* To the left of the tooltip */
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent black transparent transparent;
}

Результат:

Переместите указатель мыши над этим текстом Текст подсказки

Попробуйте сами

This example demonstrates how to add an arrow to the right of the tooltip:

Right arrow

.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  top: 50%;
  left: 100%; /* To the right of the tooltip */
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent transparent black;
}

Результат:

Переместите указатель мыши над этим текстом Текст подсказки

Попробуйте сами

Входящий инструмент подсказки (анимация)

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

Пример

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

Попробуйте сами