Подсказки (tooltip) в CSS

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

Когда пользователь наводит курсор мыши на элемент, CSS-подсказка (tooltip) может показать дополнительную информацию о нём.

CSS Создание базовой подсказки

Базовая подсказка состоит из двух частей, одной в HTML и одной в CSS, и появляется, когда мышь наводится на элемент.

HTML: Добавьте класс "tooltip" к элементу-контейнеру (например, <div>); наведение на него и вызывает появление текста подсказки. Этот текст находится в строчном элементе (например, <span>) с классом tooltiptext.

CSS: Поскольку текст подсказки использует position: absolute, классу tooltip нужен position: relative. Класс tooltiptext содержит сам текст и скрывает его, пока наведение не сделает его видимым. Это наведение определяется селектором :hover, который показывает текст, когда мышь находится над <div> с классом tooltip.

Пример

Создайте базовую CSS-подсказку, которая появляется при наведении курсора на текст. Используйте контейнер с position:relative и скрытый span с position:absolute, который становится видимым при наведении. Оформите подсказку чёрным фоном, белым текстом, выравниванием по центру, отступами и скруглёнными углами.

> Результат: полная HTML-страница

Prompt

Создайте базовую CSS-подсказку, которая появляется при наведении курсора на текст. Используйте контейнер с position:relative и скрытый span с position:absolute, который становится видимым при наведении. Оформите подсказку чёрным фоном, белым текстом, выравниванием по центру, отступами и скруглёнными углами.

Результат: полная HTML-страница

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Basic CSS Tooltip</title>
<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
  cursor: pointer;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 130px;
  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>
</head>
<body>

<h2>Basic Tooltip</h2>

<p>Move the mouse over the text below:</p>

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>

</body>
</html>

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

Подсказку можно разместить где угодно. В примерах ниже она расположена справа, слева, сверху и снизу от элемента, на который наводится курсор.

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

left: 105% размещает подсказку справа. Вертикальное центрирование обеспечивает top: -5px, что соответствует внутреннему отступу текста подсказки в 5px сверху и снизу.

Создайте CSS-подсказку, расположенную справа от текста, на который наводится курсор. Используйте left:105%, чтобы разместить подсказку справа, и top:-5px, чтобы отцентрировать её по вертикали относительно контейнера.

> Результат: полная HTML-страница

Prompt

Создайте CSS-подсказку, расположенную справа от текста, на который наводится курсор. Используйте left:105%, чтобы разместить подсказку справа, и top:-5px, чтобы отцентрировать её по вертикали относительно контейнера.

Результат: полная HTML-страница

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Right Tooltip</title>
<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
  cursor: pointer;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 130px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  position: absolute;
  z-index: 1;
  top: -5px;
  left: 105%;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>
</head>
<body>

<h2>Right Tooltip</h2>

<p>Move the mouse over the text below:</p>

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>

</body>
</html>

Подсказка слева

right: 105% размещает подсказку слева, а top: -5px снова центрирует её по вертикали.

Создайте CSS-подсказку, расположенную слева от текста, на который наводится курсор. Используйте right:105%, чтобы разместить подсказку слева, и top:-5px, чтобы отцентрировать её по вертикали относительно контейнера.

> Результат: полная HTML-страница

Prompt

Создайте CSS-подсказку, расположенную слева от текста, на который наводится курсор. Используйте right:105%, чтобы разместить подсказку слева, и top:-5px, чтобы отцентрировать её по вертикали относительно контейнера.

Результат: полная HTML-страница

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Left Tooltip</title>
<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
  cursor: pointer;
  margin-left: 200px;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 130px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  position: absolute;
  z-index: 1;
  top: -5px;
  right: 105%;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>
</head>
<body>

<h2>Left Tooltip</h2>

<p>Move the mouse over the text below:</p>

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>

</body>
</html>

Подсказка сверху

С bottom: 100% подсказка находится над элементом. Половина её ширины в 130px (130 / 2 = 65) даёт margin-left: -65px, который её центрирует.

Создайте CSS-подсказку, расположенную над текстом, на который наводится курсор. Используйте bottom:100% и margin-left:-65px, чтобы отцентрировать подсказку шириной 130px над элементом-контейнером.

> Результат: полная HTML-страница

Prompt

Создайте CSS-подсказку, расположенную над текстом, на который наводится курсор. Используйте bottom:100% и margin-left:-65px, чтобы отцентрировать подсказку шириной 130px над элементом-контейнером.

Результат: полная HTML-страница

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Top Tooltip</title>
<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
  cursor: pointer;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 130px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  position: absolute;
  z-index: 1;
  bottom: 100%;
  left: 50%;
  margin-left: -65px;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>
</head>
<body>

<h2>Top Tooltip</h2>

<p>Move the mouse over the text below:</p>

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>

</body>
</html>

Подсказка снизу

С top: 100% подсказка находится под элементом. Её центрирует margin-left: -65px, половина её ширины в 130px (130 / 2 = 65).

Создайте CSS-подсказку (tooltip), расположенную под текстом, на который наводится курсор. Используйте top:100% и margin-left:-65px, чтобы отцентрировать подсказку шириной 130px под элементом-контейнером.

> Результат: полная HTML-страница

Prompt

Создайте CSS-подсказку (tooltip), расположенную под текстом, на который наводится курсор. Используйте top:100% и margin-left:-65px, чтобы отцентрировать подсказку шириной 130px под элементом-контейнером.

Результат: полная HTML-страница

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bottom Tooltip</title>
<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
  cursor: pointer;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 130px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  position: absolute;
  z-index: 1;
  top: 100%;
  left: 50%;
  margin-left: -65px;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>
</head>
<body>

<h2>Bottom Tooltip</h2>

<p>Move the mouse over the text below:</p>

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>

</body>
</html>

Подсказка с плавным появлением (Fade-in)

Плавное появление получается при сочетании CSS-свойств transition и opacity. За заданное количество секунд (здесь — 2) подсказка переходит от полностью невидимой (opacity: 0) к полностью видимой (opacity: 1).

Пример

Создайте CSS-подсказку, которая плавно появляется (fade in) при наведении. Используйте свойство CSS transition для opacity, изменяя значение от opacity:0 до opacity:1 за 2 секунды при наведении курсора на контейнер.

> Результат: полная HTML-страница

Prompt

Создайте CSS-подсказку, которая плавно появляется (fade in) при наведении. Используйте свойство CSS transition для opacity, изменяя значение от opacity:0 до opacity:1 за 2 секунды при наведении курсора на контейнер.

Результат: полная HTML-страница

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Fade-in Tooltip</title>
<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
  cursor: pointer;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 130px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  position: absolute;
  z-index: 1;
  bottom: 100%;
  left: 50%;
  margin-left: -65px;
  opacity: 0;
  transition: opacity 2s;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}
</style>
</head>
<body>

<h2>Fade-in Tooltip</h2>

<p>Move the mouse over the text below:</p>

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>

</body>
</html>