Как привязать подсказку к кнопке через anchor positioning

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

Дайте кнопке имя якоря, а подсказке — ссылку на него и сторону, с которой встать:

<style>
  .btn { anchor-name: --save; margin: 48px 16px 8px; }
  .tip { position: absolute; position-anchor: --save; position-area: top; margin-bottom: 6px;
    padding: 4px 8px; border-radius: 4px; background: #222; color: white; font: 12px system-ui;
    opacity: 0; transition: opacity 0.2s; }
  .btn:hover + .tip, .btn:focus-visible + .tip { opacity: 1; }
</style>
 
<button class="btn">Save</button>
<span class="tip">Saved to your list</span>

anchor-name объявляет якорь (имя начинается с двух дефисов), position-anchor связывает с ним абсолютно позиционированный элемент, а position-area: top ставит подсказку над якорем по центру. Подсказка не обязана быть внутри кнопки, и не нужен position: relative у родителя.

Подсказка по клику в popover

Popover выводится в верхний слой поверх всего, и его не обрезает overflow: hidden у родителей. Якорь задаёт место:

<style>
  .help { anchor-name: --help; margin: 8px 16px 64px; }
  #hint { position-anchor: --help; position-area: bottom span-right; inset: auto; margin: 6px 0 0;
    padding: 8px 12px; border: 1px solid #ccc; border-radius: 6px;
    position-try-fallbacks: flip-block; }
</style>
 
<button class="help" popovertarget="hint">What is this?</button>
<div id="hint" popover>Your list is saved for 30 days.</div>

inset: auto и margin отменяют стандартное центрирование popover. position-try-fallbacks: flip-block переносит подсказку наверх, если снизу не хватает места.

Точные координаты через anchor()

Вместо position-area можно задать отдельные стороны: top: anchor(bottom); left: anchor(left); — верх подсказки совпадёт с низом кнопки, а левые края выровняются.

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

Не думать о браузерах без поддержки. Якорное позиционирование появилось недавно, и в старых браузерах подсказка встанет в угол страницы. Оберните правила в @supports (anchor-name: --a), а для остальных оставьте простое позиционирование через position: relative у обёртки.