스스로 위치를 정하는 Native Popover
(dev.to)
새로운 브라우저 내장 기능인 Popover API와 CSS Anchor Positioning이 프론트엔드 개발 방식을 혁신하고 있습니다. 복잡했던 툴팁, 팝오버, 메뉴 등의 UI 구현이 더 이상 대규모 JavaScript 라이브러리 없이도 네이티브로 가능해져 개발 부담과 번들 크기를 크게 줄여줍니다.
이 글의 핵심 포인트
- 1Popover API는 2025년 4월부터 모든 브라우저에 안정화되어, 버튼 클릭 시 툴팁/팝오버를 네이티브로 구현한다.
- 2기존에는 35KB의 Floating UI 등 대규모 JS 라이브러리가 필요했지만, Popover API는 JavaScript 없이 네이티브 기능을 제공한다.
- 3Popover API는 z-index 관리, 외부 클릭 닫기(light dismiss), ESC 키보드 처리, 포커스 관리 등 복잡한 기능을 기본 제공한다.