Popover в кабинете, SaaS-интерфейсе или дизайн-системе часто ломается не из-за UI, а из-за геометрии. Типичная ошибка - тащить в каждый tooltip getBoundingClientRect(), scroll/resize handlers и свой мини layout engine.
Идея
CSS Anchor Positioning позволяет привязать один элемент к другому и описать размещение в CSS:
Actions
.trigger { anchor-name: --actions; }
.popover {
position: fixed;
position-anchor: --actions;
position-area: bottom center;
position-try-fallbacks: flip-block;
margin-top: 8px;
}Что уходит из JS
* anchor-name объявляет кнопку якорем
* position-anchor связывает overlay с якорем
* position-area задает сторону и выравнивание
* position-try-fallbacks дает браузеру шанс переставить popover, если снизу нет места
В связке с Popover API HTML отвечает за открытие, закрытие и top layer, CSS - за геометрию, JS - за бизнес-логику.
Продакшен-подход
Используйте как progressive enhancement:
@supports (anchor-name: --x) and (position-area: bottom) {
.popover {
position-anchor: --actions;
position-area: bottom center;
}
}
Практический совет: оставьте fallback - обычное позиционирование, modal-like поведение или существующий overlay-компонент из дизайн-системы.
Где осторожно
Технология хороша для меню у кнопки, dropdown, tooltip у иконки, inline-подсказок форм. Но для nested-popover, виртуализированных списков, кастомной collision-логики и полной кроссбраузерной поддержки пока рано выкидывать Floating UI или Popper.
Вывод:
CSS Anchor Positioning убирает самый грязный слой overlay-архитектуры - JS-позиционирование, но требует feature detection, fallback и проверки доступности.