Подсказка CSS - httpdoc.ru

Подсказка CSS

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

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <title> CSS Tooltip </title> 
  <meta charset="UTF-8">
</head>  
<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: green;
  color: #fff;
  text-align: center;
  border-radius: 10px;
  padding: 10px 0;
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>
<body style="text-align:center;">

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

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

</body>
</html>

CSS Tooltip

Наведите указатель мыши на текст ниже:

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

Lorem ipsum dolor sit amet, conctetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud упражнение ullamco labouris nisi ut aliquip ex ea Commodo Conquat. Duis aute irure dolor в репрехендерит в сладострастном velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, загорелся in culpa qui officia deserunt mollit anim id est Laborum.