Всплывающий текст при наведении CSS

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

Пример

HTML


<div class="text-ex-tooltip">
  <p>Lorem Ipsum</p>
  <div class="tooltip-content">
    <p>Lorem ipsum dolor sit amet</p>
  </div> 
</div>

CSS


.text-ex-tooltip {
  position: relative;
}
.text-ex-tooltip .tooltip-content {
  display: none;
  position: absolute;
  background-color: #fff; /* Фон подсказки */
  padding: 0rem 1.2rem; /* Отступы от края */
  top: -20%; /* Позиция подсказки */
  text-align: center;
  font-size: 1rem;
  color: #a8d7e0; /* Цвет текста */
}
.text-ex-tooltip:hover .tooltip-content {
  display: block;
}