Tooltip

툴팁은 호버 또는 포커스 시 맥락적이고 유용하며 필수가 아닌 추가 정보를 표시하면서, 사용자에게 소통하고 명확성을 주는 능력을 제공하는 컴포넌트예요.

출처: Tooltip

본문

문서 업데이트: 표준 및 아이콘 버튼 툴팁을 별도의 변형으로 구분해 지칭하지 않도록 가이드를 업데이트했어요. 툴팁은 다른 컴포넌트 안에 내장되어 있으므로 다시 포함할 필요가 없습니다. 브레이킹 변경은 없으며, 코드에서 특정 컴포넌트의 툴팁 가시성을 개선하는 작업을 진행 중입니다.

개요 (Overview)

툴팁은 단독 컴포넌트로 사용되기보다 다른 컴포넌트 안에 내장됩니다. 툴팁이 다른 컴포넌트 안에 내장되어 있으므로 다시 포함할 필요가 없어요. 유일한 예외는 별도의 컴포넌트로 남아 있는 정의 툴팁(definition tooltip)입니다. 툴팁은 사용자가 UI 요소 위를 호버하거나 포커스할 때 추가 정보를 제공하며, 인터페이스를 어지럽히지 않고 빠른 맥락을 제공하기 위해 필요한 경우에만 사용해야 합니다.

언제 사용할까요 (When to use)

기본적으로 아이콘 버튼, 아이콘 탭, 슬라이더, 복사 버튼 같은 대부분의 컴포넌트에는 이미 내장 툴팁이 있으므로 별도로 추가할 필요가 없어요. 사용자 정의는 허용되지만 권장되지는 않습니다.

툴팁은 다음에 사용할 수 있어요.

시각적 라벨이 부족한 아이콘 버튼 같은 컨트롤의 이름을 보여줄 때
포커스 가능한 요소에 대한 추가 정보를 제공해 사용자가 정보에 입각한 결정을 내리도록 도울 때
특정 요소에 대한 더 많은 맥락이나 설명을 제공할 때
용어를 정의하거나 인라인 항목에 대한 세부 정보를 제공할 때 (정의 툴팁)

정의 툴팁 (Definition tooltip)

정의 툴팁은 텍스트 안에서 용어를 정의하거나 추가 도움을 주는 데 사용돼요. UI 라벨, 문단의 단어, 또는 데이터 테이블처럼 추가 아이콘이 인터페이스를 어지럽힐 수 있는 콤팩트한 공간에서 잘 작동합니다.

언제 사용하지 말아야 할까요 (When not to use)

중요 정보 제공 (Provide critical information)

툴팁은 사용자가 호버를 벗어나면 사라지므로 사용자가 과제를 완료하는 데 필요한 정보를 포함하지 마세요. 필수 필드 같은 중요한 정보에는 항상 보이고 접근 가능한 도움말 텍스트를 사용하세요.

인터랙티브 요소 포함 (Include interactive elements)

툴팁 안에 인터랙티브 요소를 포함하지 마세요. 툴팁의 인터랙티브 요소는 일부 사용자에게는 접근 불가능하고, 모든 사용자에게는 사용하기 어렵습니다. 툴팁은 포커스를 받지 않기 때문이에요. 이미지, 버튼, 링크를 보조 정보에 포함해야 한다면 토글팁 컴포넌트와 더 나은 탭·포커스 구조를 허용하는 디스클로저 패턴을 사용해 모든 사용자의 경험을 개선하세요.

관련 정보에는 도움말 텍스트를 사용하세요. 사용자가 과제를 완료하기 위한 정보에는 툴팁을 사용하지 마세요. 간결하고 지시적인 텍스트를 사용하세요. 툴팁 안에 인터랙티브 요소를 사용하지 마세요.

툴팁과 토글팁 (Tooltips versus toggletips)

툴팁과 토글팁은 시각적으로 비슷해 보이고 둘 다 인터랙티브 트리거를 가져요. 두 컴포넌트는 호출되고 닫히는 방식과 사용자가 내용과 상호작용해야 하는지 여부에서 다릅니다. 툴팁은 인터랙티브하지 않은 짧고 보조적인 정보를 공개해야 할 때 호버나 포커스 시 노출됩니다. 토글팁은 사용자가 상호작용해야 하는 버튼 같은 인터랙티브 요소를 노출해야 할 때 클릭이나 enter 시 사용됩니다.

포맷 (Formatting)

구조 (Anatomy)

UI 트리거(UI trigger): 통합 툴팁이 있는 컴포넌트나 점선 밑줄이 있는 정의 용어를 포함한 모든 요소예요.
캐럿 팁(Caret tip): 컨테이너를 관련 트리거 요소와 밀접하게 연결해요.
컨테이너(Container): 짧거나 간단한 텍스트를 담아요.

정렬 (Alignment)

툴팁의 컨테이너는 페이지 밖으로 번지거나 중요한 정보를 덮지 않도록 시작(start), 중앙(center), 끝(end)으로 정렬될 수 있어요. UI 트리거 버튼과 캐럿 팁은 툴팁과 트리거를 연결하도록 서로 세로로 중앙 정렬되어야 합니다. 여러 요소가 서로 가까이 있을 때 특히 유용합니다.

툴팁 컨테이너는 자동 또는 수동으로 시작, 중앙, 끝에 배치될 수 있어요.

배치 (Placement)

툴팁 방향은 기본적으로 auto로 설정됩니다. 열릴 때 툴팁은 브라우저의 가장자리를 감지해 컨테이너가 잘리지 않도록 뷰 안에 배치됩니다. 툴팁은 대신 특정 방향을 사용할 수 있으며 트리거 항목의 오른쪽, 왼쪽, 아래, 위에 배치될 수 있어요. 사용자의 과제에 필수적인 관련 콘텐츠를 덮지 마세요. 툴팁은 페이지 밖이나 다른 콘텐츠 뒤로 번지면 안 됩니다.

툴팁 컨테이너는 자동 또는 수동으로 오른쪽, 왼쪽, 아래, 위에 배치될 수 있어요.

정의 툴팁의 경우 트리거 단어의 왼쪽과 오른쪽 단어를 가리지 마세요. 툴팁이 활성 상태일 때 다른 콘텐츠 위에 겹치고 주변 컴포넌트에 잘리거나 일부 콘텐츠가 보이지 않게 페이지 밖으로 번지지 않도록 하세요.

콘텐츠 (Content)

주요 요소 (Main elements)

텍스트 (Text)

관련성 있고 구체적인 콘텐츠를 담아야 해요.
툴팁은 영구적이지 않으므로 필수 과제 지침을 담아서는 안 됩니다.
아이콘 버튼 같은 아이콘 전용 컴포넌트의 툴팁은 버튼의 기능을 한두 단어로 간결하게 설명해야 해요.
정의 및 지시적 툴팁의 경우 문장형 대문자를 사용하고, 공간이 제한되지 않는 한 텍스트를 구두점이 있는 완전한 문장으로 쓰세요.

추가 가이드 (Further guidance)

더 자세한 콘텐츠 가이드는 Carbon의 콘텐츠 가이드라인을 참고하세요.

동작 (Behaviors)

상태 (States)

툴팁 컴포넌트에는 on(호버와 포커스)과 closed 두 가지 상태가 있어요. 기본적으로 툴팁은 숨겨져 있고 비활성화되어 있습니다.

인터랙션 (Interactions)

마우스 (Mouse)

툴팁은 마우스가 UI 트리거 위를 호버할 때 트리거됩니다. 마우스가 활성 컨테이너나 UI 트리거 위에 머무르면 툴팁이 지속됩니다. 마우스가 다른 요소로 벗어나면 툴팁은 닫힙니다.

정의 툴팁은 상황에 따라 호버 또는 클릭 인터랙션을 사용할 수 있어요. 사용자는 정보를 빠르게 훑어볼 필요가 있으면 호버할 수 있습니다. 사용자는 더 많은 시간이 필요하거나 툴팁이 의도치 않게 트리거될 수 있다고 생각되면 클릭할 수 있어요.

키보드 (Keyboard)

사용자는 Tab 키를 눌러 UI 트리거로 이동하고 툴팁을 표시할 수 있습니다. Esc 키를 눌러 툴팁을 닫을 수 있어요. 포커스 시 컨테이너를 드러내는 툴팁의 경우 포커스가 벗어나면 컨테이너가 사라집니다.

팝오버 (Popover)

팝오버는 툴팁, 오버플로 메뉴, 드롭다운 메뉴 같은 일부 컴포넌트의 기본 레이어로 사용됩니다. 더 자세한 가이드는 Carbon의 팝오버 컴포넌트를 참고하세요.

디스클로저 (Disclosure)

디스클로저는 팝오버를 기본 레이어로 사용해요. 디스클로저는 컨테이너, 텍스트, 인터랙티브 요소로 구성됩니다. 인터랙티브 요소는 페이지의 탭 순서에 유지됩니다. 더 자세한 가이드는 Carbon의 디스클로저 패턴을 참고하세요.

토글팁 (Toggletip)

토글팁은 디스클로저 패턴을 사용해 팝오버의 가시성을 토글하며, 설명 텍스트부터 인터랙티브 요소까지 다양한 정보를 담을 수 있어요. 더 자세한 가이드는 Carbon의 토글팁 컴포넌트를 참고하세요.

차트 툴팁 (Chart tooltip)

차트 툴팁은 커서가 Carbon의 데이터 시각화 차트의 데이터 포인트, 아이콘 버튼, 잘린 텍스트 같은 요소 위에 위치할 때 나타나요. 이는 차트 컴포넌트에 내장된 고유 동작입니다. 차트에서 툴팁 사용에 대해 더 알아보려면 차트 구조를 참고하세요.

참고 자료 (References)

Alita Joyce, Tooltip Guidelines (Nielsen Norman Group, 2019)

MDN Web Docs, ARIA: tooltip role (Mozilla: Developer contributors, 2023)

더 알아보기 (Learn more)

툴팁은 호버나 포커스 시 짧고 필수가 아닌 보조 정보를 보여주는 컴포넌트예요. 대부분의 컴포넌트에는 이미 내장 툴팁이 있어 별도로 추가할 필요가 없고, 과제 완료에 필요한 중요 정보나 인터랙티브 요소는 툴팁에 넣지 마세요. 인터랙티브 요소를 노출해야 한다면 토글팁이나 디스클로저 패턴을, 용어 정의가 필요하면 정의 툴팁을 사용하는 게 좋습니다.