Toggletip
Toggletip (토글팁)
토글팁은 UI 트리거 요소를 클릭하면 추가 정보를 표시하고 숨겨주는 컴포넌트예요. 토글팁은 인터랙티브 요소를 담을 수 있습니다.
출처: Toggletip
본문
개요 (Overview)
토글팁은 사용자가 버튼을 클릭할 때 보조 콘텐츠를 드러내고, 사용자가 닫을 때까지 열린 상태로 유지돼요. 토글팁은 UI 트리거와 토글팁 콘텐츠(팝오버 컴포넌트 기반)로 구성됩니다. 토글팁은 접근성 요구사항을 유지하는 한 다양한 정보와 인터랙티브 요소를 포함할 수 있는데, 여기에는 포커스 순서와 모든 기능이 키보드 인터페이스를 통해 조작 가능함을 보장하는 것이 포함됩니다.
토글팁과 툴팁 (Toggletips versus tooltips)
툴팁과 토글팁은 비슷해 보이고 둘 다 인터랙티브 트리거를 갖지만, 활성화되는 방식과 담을 수 있는 내용에서 다릅니다. 툴팁은 인터랙티브하지 않은 짧고 보조적인 정보를 공개해야 할 때 호버나 포커스 시 노출됩니다. 토글팁은 사용자가 상호작용해야 하는 버튼 같은 인터랙티브 요소를 노출해야 할 때 클릭이나 enter 시 사용됩니다.
언제 사용할까요 (When to use)
- 열린 토글팁 안에 인터랙티브 요소를 배치해야 할 때
- 빠르고 맥락 내 편집(in-context editing)을 위해
- 콘텐츠 위에 겹치는 필터 패널을 위해
언제 사용하지 말아야 할까요 (When not to use)
작업 흐름을 완료하는 데 필요한 중요 정보를 제시하거나 필수 입력을 요청하는 데 사용하지 마세요. 대신 모달 컴포넌트를 사용하세요.
포맷 (Formatting)
구조 (Anatomy)
- UI 트리거(UI trigger): 클릭 또는 enter 시 토글팁을 트리거하는 UI 요소예요.
- 캐럿 팁(Caret tip): 콘텐츠 컨테이너를 트리거에 시각적으로 연결해 콘텐츠가 어디서 시작되는지 나타내요.
- 컨테이너(Container): 텍스트와 인터랙티브 요소를 담아요.
크기 (Sizing)
토글팁 컨테이너는 최대 너비 288px이며, 높이는 안의 콘텐츠에 따라 달라져요. 너비를 네 컬럼 이내로 유지할 것을 권장합니다. 자세한 내용은 Style 탭을 참고하세요.
배치 (Placement)
토글팁은 헤더, 데이터 테이블, 사이드 패널, 모달, 읽기 전용 카드 등 UI의 여러 부분에 사용될 수 있어요. 활성 상태일 때 토글팁 팝오버는 UI 트리거의 위, 아래, 왼쪽, 오른쪽에 배치될 수 있습니다.
트리거와 관련된 팝오버의 배치는 사용된 팝오버 유형에 따라 달라져요.
콘텐츠 (Content)
주요 요소 (Main elements)
제목, 본문, 푸터 콘텐츠는 사용 사례에 따라 달라질 수 있어요. 토글팁 안에 사용되는 콘텐츠의 예를 보려면 디스클로저 패턴을 방문하세요.
오버플로 콘텐츠 (Overflow content)
토글팁은 유연한 팝오버 컴포넌트와 디스클로저 패턴을 사용하므로 보통 스크롤이 필요 없어요. 예를 들어 드롭다운 같은 상황에서 스크롤이 필요하다면, 헤더와 푸터가 있다면 그 요소들을 고정한 채 본문 섹션만 세로로 스크롤해야 합니다. 가로로 스크롤하거나 콘텐츠가 페이지 밖으로 번지게 하지 마세요.
이 예시는 패턴이며 현재 컴포넌트로 제공되지는 않아요.
추가 가이드 (Further guidance)
더 자세한 콘텐츠 가이드는 Carbon의 콘텐츠 가이드라인을 참고하세요.
동작 (Behaviors)
상태 (States)
토글팁 컴포넌트에는 열림(open, 클릭 또는 enter)과 닫힘(closed) 두 가지 상태가 있어요. 기본적으로 토글팁은 숨겨져 있고 비활성화되어 있습니다. 토글팁 상태에 대한 자세한 내용은 Style 탭을 참고하세요.
인터랙션 (Interactions)
마우스 (Mouse)
토글팁은 클릭 시 트리거되며 트리거를 다시 클릭하거나 활성 팝오버나 UI 트리거 바깥의 아무 곳이나 클릭해 닫힙니다.
키보드 (Keyboard)
토글팁은 트리거 요소에 포커스가 있는 동안 Enter 또는 Space를 눌러 트리거됩니다. 사용자는 Escape를 눌러 토글팁을 닫을 수 있습니다. 추가 키보드 인터랙션은 Accessibility 탭을 참고하세요.
관련 (Related)
팝오버 (Popover)
팝오버는 툴팁, 오버플로 메뉴, 드롭다운 메뉴 같은 일부 컴포넌트의 기본 레이어로 사용됩니다. 더 자세한 가이드는 Carbon의 팝오버 컴포넌트를 참고하세요.
디스클로저 (Disclosure)
디스클로저는 팝오버를 기본 레이어로 사용해요. 디스클로저는 팝오버 컨테이너, 텍스트, 인터랙티브 요소로 구성됩니다. 인터랙티브 요소는 페이지의 탭 순서에 유지됩니다.
툴팁 (Tooltip)
툴팁은 호버 또는 포커스 시 추가 정보를 표시해요. 포함되는 정보는 맥락적이고, 유용하며, 필수가 아니어야 하고, 사용자에게 소통하고 명확성을 주는 추가 능력을 제공해야 합니다.
더 알아보기 (Learn more)
토글팁은 클릭으로 열고 닫는 방식으로 추가 정보를 보여주는 컴포넌트예요. 툴팁이 호버·포커스로 짧은 비인터랙티브 정보를 보여주는 데 비해, 토글팁은 버튼 같은 인터랙티브 요소를 노출하고 싶을 때 사용합니다. 최대 너비 288px을 지키고, 작업 흐름에 필수적인 정보를 요청하는 데는 모달을 대신 사용하세요.