CSS만으로 툴팁/팝오버 위치 잡기 - 'Anchor Positioning'이 Baseline 2026 진입

한 줄 요약 - 툴팁이나 팝오버를 특정 요소에 딱 붙여 띄우는 일을, 이제 자바스크립트 위치 계산 라이브러리 없이 CSS만으로 할 수 있습니다.

무슨 일이에요?

한 요소를 기준점(anchor)으로 지정하고, 다른 요소가 그 기준에 맞춰 위치를 잡습니다. 화면 밖으로 넘칠 때 반대편으로 뒤집는 fallback까지 CSS로 됩니다. Chrome 125+, Firefox, Safari 26 등에서 지원하며 Baseline 2026에 들어왔습니다.

핵심 코드

/* 1) 기준이 될 요소에 이름 부여 */
.btn { anchor-name: --btn; }

/* 2) 팝오버가 그 기준에 맞춰 위치 */
.tip {
  position: absolute;
  position-anchor: --btn;
  top: anchor(bottom);   /* 내 위쪽 = 기준의 아래쪽 */
  left: anchor(left);
  position-try-fallbacks: flip-block; /* 넘치면 위로 뒤집기 */
}

왜 중요해요?

Floating UI 같은 JS 위치 계산 라이브러리를 상당 부분 대체해 번들이 줄어듭니다.
HTML popover 속성과 함께 쓰면 열고 닫기/키보드 닫힘/최상위 레이어가 기본 제공됩니다.
hover 툴팁의 지연 같은 타이밍 로직은 여전히 약간의 JS가 필요할 수 있습니다.

무슨 일이에요?

핵심 코드

왜 중요해요?

댓글