Всплывающая подсказка при наведении на чистом CSS

Как показать подсказку или описание поверх картинки, ссылки или любого блока при наведении — на чистом CSS, с поддержкой клавиатуры.

Подсказка при наведении на картинку, ссылку или карточку делается одними стилями.

Разметка

<a href="/catalog/item/" class="tip">
  Ссылка
  <span class="tip__overlay">Короткое описание, которое появится при наведении</span>
</a>

Внутри элемента, на который наводят курсор, лежит блок с подсказкой. Для подсказки внутри ссылки используйте span, а не div: блочный элемент внутри строчной ссылки — ошибка разметки.

Стили

.tip { position: relative; }
.tip__overlay {
  position: absolute;
  left: 0; top: 100%;
  width: 240px;
  padding: 8px 12px;
  background: rgba(0, 0, 0, .8);
  color: #fff;
  border-radius: 6px;
  opacity: 0; visibility: hidden;
  transition: opacity .2s;
}
.tip:hover .tip__overlay,
.tip:focus-visible .tip__overlay {
  opacity: 1; visibility: visible;
}

Родителю задаём position: relative, чтобы подсказка позиционировалась относительно него, а не страницы.
Подсказка скрыта через opacity и visibility — так её появление можно плавно анимировать (с display: none анимация не работает).
:focus-visible показывает подсказку и тем, кто переходит по ссылкам клавишей Tab.

На телефонах наведения нет — важную информацию не прячьте только в подсказку.