CSS 툴팁 위치, 크롬에서 클릭하며 맞추는 법

세 줄 요약

Elements의 Styles에서 position-area 선언 옆 아이콘을 누르면 배치 영역을 화면으로 선택할 수 있다.
위치가 바뀌지 않으면 기준 앵커의 연결과 position 속성부터 확인한다.
화면 가장자리의 잘림은 position-try-fallbacks로 대체 위치를 지정해 대응한다.

Styles의 position-area 옆 아이콘을 누른다

CSS로 툴팁을 버튼 위나 아래에 붙이고 있다면, 크롬 DevTools에서 배치 영역을 클릭하며 조정할 수 있다. Elements에서 위치를 바꿀 요소를 선택하고, Styles의 position-area 선언 옆에 있는 작은 아이콘을 누르면 된다.

10월 20일 공개된 DevTools 변경 안내는 이 시각 편집기를 Chrome 155·156의 개선 사항으로 소개했다. 편집기에서는 앵커 주변 영역을 고르고 두 축을 함께 또는 따로 조정할 수 있다. CSS 코드의 키워드를 바꾸며 화면을 대조하던 작업에 선택용 UI가 붙은 셈이다.

배치할 영역보다 먼저, 어느 버튼을 기준으로 삼는지 확인한다

position-area는 앵커를 가운데에 둔 3×3 영역을 기준으로 위치를 지정한다. 아래쪽 가운데 영역은 bottom center, 위쪽 가운데 영역은 top center로 표현할 수 있다. 기본 앵커가 없거나 요소가 절대 위치 요소가 아니면 이 속성은 효과가 없다.

다음은 기준 버튼을 .trigger, 이미 표시 중인 툴팁을 .tooltip으로 둔 배치 예다. 툴팁의 열기·닫기나 키보드 동작까지 구현한 전체 위젯 코드는 아니다.

.trigger {
  anchor-name: --help-button;
}
.tooltip {
  position: absolute;
  position-anchor: --help-button;
  inset: auto;
  margin: 0;
  position-area: bottom center;
}

anchor-name과 position-anchor가 같은 이름을 가리키는 상태에서 편집기를 열면, 어떤 기준 요소의 어느 쪽으로 이동하는지 이해하기 쉽다. 단어 순서를 무작정 바꾸기보다 연결 관계와 선택 영역을 함께 보는 편이 낫다.

팝오버나 대화상자에는 화면 중앙에 배치하는 브라우저 기본 스타일이 적용될 수 있다. 크롬의 앵커 배치 가이드는 이런 레이아웃 혼동을 줄이기 위해 inset: auto로 기본 inset을 해제하는 방법을 제시한다. 프로젝트가 따로 설정한 top·left 등도 Styles에서 함께 살펴야 한다.

여러 암시적 앵커와 연결된 팝오버라면, 새 DevTools에서는 DOM 트리의 popover 표시를 오른쪽 클릭해 연결된 앵커 요소로 이동할 수 있다. 배치 영역이 맞는데도 엉뚱한 버튼 옆에 나타나는 상황에서는 영역 선택보다 기준 요소 확인이 먼저다.

아래 공간이 부족할 때 쓸 위치는 따로 지정한다

화면 가운데에서 맞춘 위치가 가장자리에서도 맞는 것은 아니다. CSS의 대체 배치 기능은 요소가 넘칠 때 브라우저가 다른 위치를 시도하도록 한다. 앞 예에서 아래 공간이 부족하면 위쪽을 시도하게 하려면 다음 선언을 덧붙일 수 있다.

.tooltip {
  position-try-fallbacks: top center;
}

대체 위치도 들어맞지 않으면 초기 배치로 돌아갈 수 있다. 따라서 긴 도움말과 작은 화면을 포함해 요소의 크기까지 살펴야 한다. 시각 편집기로 기본 위치를 정한 뒤, 스크롤과 창 크기 변화에서 대체 위치가 필요한지 확인하는 순서가 실용적이다.

Styles의 position-area 옆 아이콘을 누른다

배치할 영역보다 먼저, 어느 버튼을 기준으로 삼는지 확인한다

팝오버는 기본 inset과 연결된 앵커도 살핀다

아래 공간이 부족할 때 쓸 위치는 따로 지정한다