Как сделать всплывающую подсказку

Короткий ответ

Самая простая подсказка — атрибут title, её показывает сам браузер:

<button title="Copies the link to the clipboard">Copy link</button>

Она появляется с задержкой, выглядит по-разному в разных системах и не показывается на телефоне и с клавиатуры.

Своя подсказка

Текст хранится в атрибуте data-*, а рисует его псевдоэлемент ::after:

<style>
  .tip { position: relative; margin: 40px 16px 8px; }
  .tip::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 50%; translate: -50% 0;
    padding: 4px 8px; border-radius: 4px; background: #222; color: white; font-size: 12px; white-space: nowrap;
    opacity: 0; pointer-events: none; transition: opacity 0.2s; }
  .tip:hover::after, .tip:focus-visible::after { opacity: 1; }
</style>
 
<button class="tip" data-tip="Saved to your list">Save</button>

attr(data-tip) подставляет значение атрибута в content. pointer-events: none не даёт подсказке перехватывать курсор.

Доступность

Текст из ::after экранные дикторы читают не всегда. Если подсказка важна, свяжите её с кнопкой через aria-describedby и отдельный элемент с текстом. Для подсказок с кнопками и ссылками внутри подходит popover.

Частая ошибка

Прятать в подсказку важную информацию — цену, условия, ошибку формы. На телефоне подсказку по наведению никто не увидит. Подсказка — это дополнение; всё нужное для действия должно быть видно сразу.