React Tooltip

툴팁은 대상 컴포넌트 근처에 떠서 보조적이고 상황에 맞는 정보를 제공해주는 UI예요. 꼭 필요하지는 않지만 도움이 되는 일반 텍스트 정보를 전달할 때 쓰죠. 이 페이지에서는 툴팁의 트리거 동작, 레이아웃, 접근성, 그리고 콘텐츠를 다듬는 기준을 하나씩 정리해 볼게요.

출처: 문서

본문

미리보기 (Preview)

툴팁은 대상 컴포넌트 가까이에 떠서 보조적이고 상황에 맞는 정보를 제공해요. 도움이 되지만 필수는 아닌, 일반 텍스트 정보를 제공할 때 사용해야 해요. 시스템 피드백을 전달하는 용도로는 쓰지 마세요. 풍부하고 형식화된 정보를 전달해야 한다면 popover를 대신 사용하세요.

동작 (Behavior)

툴팁은 대상 컴포넌트에 마우스를 올리거나(hover) 포커스하면 표시되고, 대상이나 툴팁 컨테이너에서 벗어나거나 포커스를 잃으면(blur) 사라져요.

레이아웃 (Layout)

기본적으로 툴팁은 대상 요소에서 4픽셀 떨어진 위치에, hover나 포커스 시 배치돼요. 시스템 스페이싱 토큰을 사용해 툴팁의 위치를 조정해서 중요한 정보를 가리지 않도록 하세요. 선택적인 화살표는 항상 대상 요소를 가리켜야 해요.

복잡한 레이아웃에서는 툴팁 안에 더 많은 정보가 있다는 것을 알리기 위해 정보(info) 버튼을 사용하는 것을 고려해 보세요.

접근성 (Accessibility)

스크린 리더 사용자를 위해 툴팁을 id 속성과 aria-describedby로 대상 요소에 연결하세요.

콘텐츠 (Content)

툴팁은 중복되는 것이 아니라 추가적인 정보를 제공하는 데 사용하세요. 툴팁의 콘텐츠는 필수적인 내용만 담아 제한하세요. 컴포넌트에 라벨이 없는 경우에는 문장형 대문자(sentence case)로 끝 구두점 없이 단순한 명사구를 사용하세요.

설명이 필요한 활성(enabled) 컴포넌트의 경우, 툴팁은 그 컴포넌트로 할 수 있는 일을 설명해야 해요. 예를 들어 "이 파일에서 텍스트 찾기"처럼요. 최소한 하나 이상의 완전한 문장이 있는 경우가 아니라면 끝 구두점을 사용하지 마세요. 비활성(disabled) 컴포넌트의 경우, 툴팁은 컨트롤을 활성화할 수 있는 조건을 제공해야 해요. 마침표는 완전한 문장에서만 사용하세요.