🎨 Тултип у края экрана переворачивается без JS

Тултип над кнопкой обычно ставят через position: absolute и bottom: 100%. Стоит кнопке оказаться у верхнего края, и подсказка уезжает за экран. Раньше это чинили JS-библиотекой вроде Floating UI. Сейчас хватает CSS:

.button {
  anchor-name: --save;
}

.tooltip {
  position: absolute;
  position-anchor: --save;
  position-area: top;
  margin-bottom: 8px;
  position-try-fallbacks: flip-block;
}

anchor-name даёт кнопке имя, position-anchor привязывает к нему тултип, а position-area: top ставит его над кнопкой. Последняя строка нужна для края экрана: если сверху места не хватает, flip-block переносит тултип под кнопку. Отступ из margin-bottom переезжает вместе с ним.

На гифке кнопка едет вверх. Слева старый способ: подсказку срезает край. Справа она переворачивается вниз.

Пересчитывать позицию при скролле и ресайзе браузер тоже будет сам, без обработчиков в JS.

Работает в Chrome 129+, Firefox 147+, Safari 26+.

🔥 — если было полезно

@glo_academy | #css_day