🔒Открыть пост
и посмотреть медиа
и посмотреть медиа
Тултип, который сам перепрыгивает вниз, когда не влезает сверху
Позиционирование поповеров годами было задачей для JS: посчитать координаты кнопки, прибавить размеры тултипа, проверить, не вылез ли он за вьюпорт, пересчитать всё это на скролле и ресайзе. Ровно ради этого в проект приходили Floating UI и Popper.js.
Теперь то же самое умеет CSS:
.btn { anchor-name: --btn; }
.tooltip {
position: absolute;
position-anchor: --btn;
position-area: block-start center;
position-try-fallbacks: flip-block;
}
Последняя строка — самое интересное. Это та самая логика «не влезло сверху, покажем снизу», за которую раньше платили килобайтами зависимости. Браузер сам проверяет доступное место и применяет запасной вариант.
Anchor positioning в Baseline и работает во всех четырёх движках. В State of CSS 2026 разработчики назвали её лучшей новой фичей года. Но там много и другой полезной информации: Ссылка скрыта
#css #лайфхак
