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

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

<p title="Нативная подсказка">Наведи на меня</p>

Для создания кастомной всплывающей подсказки, напишем элементу в html пользовательский data атрибут data-tooltip с текстом, который мы хотим выводить, а в css добавим псевдоэлемент ::after, которому передадим значение из добавленного атрибута.

<p data-tooltip="Текст подсказки">Наведи на меня</p>

[data-tooltip]::after {
    content: attr(data-tooltip);
}

Получаем такой результат: текст из атрибута вывелся на страницу.

Теперь скроем подсказку, сделаем чтобы она появлялась при наведении, немного стилизуем её и готово:

[data-tooltip] {
  position: relative;
  cursor: pointer;
  width: max-content;
}

[data-tooltip]:hover::after,
[data-tooltip]:hover::before {
  opacity: 1;
  visibility: visible;
}

[data-tooltip]::after,
[data-tooltip]::before {
  position: absolute;
  left: 50%;
  display: block;
  opacity: 0;
  visibility: hidden;
  transition: .3s;
  transform: translateX(-50%);
}

[data-tooltip]::after {
  bottom: -54px;
  content: attr(data-tooltip);
  padding: 8px;
  border-radius: 8px;
  background: orange;
  text-align: center;
  width: max-content;
}

[data-tooltip]::before {
  bottom: -10px;
  content: '';
  border: 10px solid transparent;
  border-bottom: 10px solid orange;
}