Tooltip

Tooltip은 특정 UI 요소에 대한 부가 설명을 짧고 직관적으로 전달하기 위해 사용하는 메시지 컴포넌트입니다. 주로 익숙하지 않은 기능, 아이콘 버튼, 또는 특정 컨텍스트에 대한 보충 정보를 제공할 때 사용되며, 사용자가 현재 보고 있는 요소의 의미와 동작을 빠르게 이해할 수 있도록 돕습니다.

Tooltip은 기본적으로 대상 요소와 직접 연결된 짧은 설명을 제공하는 데 목적이 있으며, 표시되는 정보는 가능한 한 간결하게 유지하는 것을 원칙으로 합니다. 보다 길거나 복수의 정보를 전달해야 하는 경우에는 Tooltip 대신 Popup Tip을 사용하여 정보의 밀도와 인터랙션 방식을 구분합니다.

Anatomy

1. Label txt
2. Container
3. Tip

Usage

Tooltip의 텍스트는 가능한 한 최소한으로 요약된 설명이어야 하며, 주 콘텐츠를 대체하기보다 보충하는 역할에 집중해야 합니다. 특히 아이콘 버튼이나 기능 중심의 액션을 설명하는 용도에 적합하며, 사용자가 의사결정을 더 쉽게 이해하도록 돕는 보조 정보로 사용하는 것이 좋습니다.

Tooltip은 다음과 같은 경우에 적합합니다.

· 아이콘 버튼의 의미를 설명해야 하는 경우
· 특정 기능 또는 액션의 목적을 짧게 보충해야 하는 경우
· Element 또는 Context에 대한 추가 설명이 필요한 경우
· Toolbar 내 툴의 역할과 shortcut을 함께 안내해야 하는 경우

반대로, 컴포넌트 내부의 부가 요소나 드롭다운 아이템 내부 아이콘처럼 이미 맥락이 충분한 경우에는 별도의 Tooltip 사용을 지양합니다.

Spec

1. Spacing, Offset & Maximum Width

기본 Tooltip은 Label Text를 기준으로 좌우 12px, 상하 8px의 내부 Padding을 사용합니다. 설명 대상이 되는 UI 요소와 Tooltip 사이에는 8px의 Offset을 두어, 요소와 메시지가 시각적으로 명확하게 분리되도록 합니다.

Tooltip의 최대 너비는 280px로 제한하며, 높이는 콘텐츠 길이에 따라 가변적으로 확장됩니다. 가독성과 정보 전달 효율을 위해 Description은 3줄을 넘지 않도록 구성하는 것을 권장합니다.

2. Toolbar Tooltip Spacing

Toolbar Tooltip은 Header, Shortcut, Description과 같이 복수의 정보 요소를 포함하는 확장형 Tooltip입니다. 기본 Tooltip과 동일한 좌우 12px 기준을 유지하되, 내부 요소 간 간격은 정보 위계에 따라 별도로 정의합니다.

Header와 Description 사이에는 4px 간격을 두며, Description 하단에는 8px 여백을 적용합니다. Shortcut은 일반적으로 Tooltip Contents의 우측에 배치하며, Header가 함께 포함되는 경우에는 Header 우측에 정렬하는 것을 원칙으로 합니다.

3. Placement System

Tooltip은 Browser Window 기준 32px 안쪽 영역에서 배치되며, 대상 요소와 Tooltip Tip의 중심 정렬을 기준으로 12가지 Placement를 사용합니다. 화면 외곽에서는 경계를 넘지 않도록 위치를 조정하고, Middle Space에서는 Bottom Placement를 기본 우선값으로 적용합니다.

4. Middle Space Placement Priority

Middle Space에서는 Tooltip이 주변 핵심 콘텐츠를 가리지 않도록 배치해야 합니다. 동일한 그룹에서는 방향의 일관성을 유지하며, 콘텐츠를 가리지 않는 조건에서 Horizontal보다 Vertical, Start/End보다 Center 정렬을 우선적으로 사용합니다.

Contents

1. Contents Priority

Tooltip이 표출이 되는데 있어서 Contents를 최대한 가리지 않는 것을 기본으로 하되, Contents의 중요도에 위계를 두어 해당 순으로 가리는 것을 원칙으로 합니다.

· Contents Priority: GNB>CTA button>filter/search bar>그외 콘텐츠
· '가리지 않는다'라는 의미는 Container 내의 콘텐츠 자체를 안 가리는 것으로 한다.

해당 Priority의 기준에 따라 가리지 우선순위가 높은 Contents가 가려지지 않는 선에서 Tooltip이 표출되는 것을 원칙으로 합니다.

2. Boundary of Contents

각 요소 영역이 가지고 있는 Contents의 기준을 Container 내의 정보를 담고있는 최소한의 Elements로 정의 하는 것으로 합니다. Tooltip은 아래에 정의 된 Contents 영역을 가리지 않고 표출되는 것을 원칙으로 합니다.

3. Tooltip Contained Shortcut

Toolbar의 영역과 같이 어떤 작업을 수행하는데 있어서 Shortcut에 대한 정보를 함께 표출할 필요가 있는 경우 사용되어 집니다. Tooltip Contents의 우측에 위치하는 것이 보편적이며, Header와 세부 Contents가 함께 사용되는 경우에는 Header의 우측에 위치하는 것이 특징입니다.

Tooltips & Popup Tips

부가적인 정보를 제공하는 Tip은 총 두가지로 사용되어 집니다. 설명을 제공하고자 하는 컴포넌트에 직접적으로 인터렉션해서 정보를 표출하는 Tooltip과 설명이 필요한 컴포넌트에 부가적인 요소인 Information Icon을 활용하여 표출하는 경우로 나뉘어 집니다. Tooltip의 경우 해당 컴포넌트가 수행하는 Action에 영향을 주지 않기 위해 Hover Interaction에서 표출하며 Popup Tip의 경우 정보가 다중 혹은 긴 경우로 Clicked Interaction으로 좀더 집중하여 해당 정보를 습득 할 수 있도록 하는 것이 특징입니다.

Tooltip

Tooltip에는 하나의 콘텐츠에 대한 설명만을 포함하며 1문장을 넘지 않는 것을 원칙으로 한다. 단, 하나의 콘텐츠에 대한 설명이나 단계적인 설명이 필요한 경우 (e.g. Toolbar)에는 Bullet Point를 활용하여 표출 하는 것으로 한다.

일반적으로 모든 Icon Button에는 Tooltip을 띄우는 것으로 한다.

Popup Tip

하나 혹은 여러 정보를 포함하고 있으며 Information Icon을 활용하여 표출 하는 방식으로 1문장이상의 세부적인 설명 혹은 두가지 이상의 콘텐츠를 포함하는 경우 사용 한다.

Interaction

1. Exposure Rules

Tooltip은 Hover Action을 통해 표출이 되고, Pop-up Tooltip은 Click Action을 통해 표출되어 지는 것이 특징 입니다.

Tooltips Exposure Rules

Pop-up Tooltips Exposure Rules

Components

Composition of Words (Icon Button)

특정 Action을 수행 하는 Icon Button을 설명하는 경우로 사용 되어 집니다.
(e.g. Segment (Icon) Button, More Icon Button)

Short Sentence

특정 콘텐츠를 간략한 문장으로 설명하는 경우로 사용 되어 집니다.
(e.g. Unfold/Fold the Crack Panel)

Explanation of Tool

특정 Tool의 설명을 표출하는 경우로 사용 되어 지며, Toolbar Type Tooltip을 사용하여 Header, Keyboard Shortcut, 그리고 Explanation의 조합으로 표현하는 것이 특징입니다.
(e.g. OSD Viewer Toolbar)

Information Icon Button (Pop-up Tooltip)

세부적인 설명이 필요한 요소의 경우 Information Icon을 활용하여 설명하는 것으로 합니다. 대표적으로 Create Project/Task에서 Project와 Task와 같이 사용자에게 부가적으로 설명이 필요한 요소에 사용됩니다.

Sub-Element of Components

컴포넌트 내에 속하는 부가적인 요소 내에 생기는 Icon Button에는 Tooltip을 띄우지 않는 것으로 하며 Icon Button이 아니더라도 설명을 위한 Tooltip을 띄우는 것을 지양한다.
(e.g. Dropdown Menu Item / Icon Button)

Usage Guidelines

Don't : 툴팁 표출 정책

툴팁은 툴팁 스스로가 가르키고 있는 콘텐츠를 가리지 않는 것을 원칙으로 합니다. 또한 툴팁의 표출 우선순위는 수직 방향 툴팁을 띄우는 것을 우선시 합니다.

Do : 툴팁 표출 정책

툴팁은 툴팁 스스로가 가르키고 있는 콘텐츠를 가리지 않는 것을 원칙으로 합니다. 또한 툴팁의 표출 우선순위는 수직 방향 툴팁을 띄우는 것을 우선시 합니다.

Don't : 툴팁 표출 위치 기준점

수직 방향으로 툴팁을 표출했을 때, 툴팁 스스로가 가르키고 있는 콘텐츠의 주변 콘텐츠를 툴팁이 가리게 될 경우에는 수평 방향으로 Tooltip의 띄우는 것을 원칙으로 합니다. 또한 해당 콘텐츠의 호버 영역을 가리지 않는 곳을 우선시합니다.

Do : 툴팁 표출 위치 기준점

수직 방향으로 툴팁을 표출했을 때, 툴팁 스스로가 가르키고 있는 콘텐츠의 주변 콘텐츠를 툴팁이 가리게 될 경우에는 수평 방향으로 Tooltip의 띄는 것을 원칙으로 합니다. 또한 해당 콘텐츠의 호버 영역을 가리지 않는 곳을 우선시합니다.

Don't : Header와 중복되는 Wording의 표현 지양

Header와 함께 사용 되는 Component에 Tooltip을 사용할 경우, 해당 Tooltip에 사용되는 문구가 Header에 포함되는 정보와 중복되지 않도록 사용합니다. (e.g. Upload Attachment)

Do : Header와 중복되는 Wording의 생략

Header와 함께 사용 되는 Component에 Tooltip을 사용할 경우, 해당 Tooltip에 사용되는 문구가 Header에 포함되는 정보와 중복되지 않도록 사용합니다. (e.g. Upload Attachment)