# Help Bubble
URL: /components/help-bubble
Source: https://github.com/daangn/seed-design/blob/dev/docs/content/components/help-bubble.mdx

사용자에게 컴포넌트의 상태나 특정 기능에 대한 추가 정보를 제공하는 컴포넌트입니다.

| Platform | Status |
| --- | --- |
| Figma | Done |
| [React](/react/components/help-bubble) | Done |
| Lynx | Not Ready |
| iOS | Done |
| Android | Done |

## Anatomy

![Help Bubble의 Anatomy 이미지. Title, Description, Close Button, Arrow로 구성됩니다.](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/4d71fbc8-8f10-4522-844e-374e3560258f)

Help Bubble은 Title, Description, Close Button을 제공합니다.

## Properties

### Placement Property

![Help Bubble의 Placement Property - Bottom-Center](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/c2486531-d8bb-4537-9580-211efdc0776a)

![Help Bubble의 Placement Property - Right-Top](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/df6b3011-0a64-4532-b1c6-9b6f68bc11b4)

Help Bubble은 Trigger 되는 요소를 기준으로 적절한 위치 옵션을 제공합니다. Placement Prop은 `{Side}` - `{Alignment}` 조합으로 구성됩니다.

| Property      | 값                            |
| ------------- | ---------------------------- |
| **Side**      | Top/Bottom/Right/Left        |
| **Alignment** | Top/Bottom/Right/Left/Center |

### Show Close Button Property

![Help Bubble의 Show Close Button Property - Close Button 표시 여부](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/24a91c1a-13eb-4750-a284-509858858146)

Close Button 사용 여부를 제공합니다. Close Button은 내부에 터치 영역을 보장하기 위한 프레임이 포함되어 있습니다.

![Close Button Target Size - 38\*38px의 터치 영역](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/cf9da619-4e0e-47d0-9da4-7ec9cab8ee99)

Close Button Target Size: 38\*38

### Show Description

![Help Bubble의 Show Description Property](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/4c83f5a1-6e53-4e93-b709-c632246ca9d6)

디자이너는 필요한 경우 Description을 사용하지 않고 Help Bubble을 표현할 수 있습니다.

**Description만 사용하는 것은 권장하지 않습니다.**

### Help Bubble Arrow 위치 조정

![Help Bubble Arrow 위치 조정 - 최소 14px 간격 유지](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/6ba8b86a-7410-431d-9d30-3d0d83a641cc)

Help Bubble의 Arrow는 화면에서 적절한 위치를 찾기 위해서 조정할 수 있습니다. 조정시 최소 14px의 공간을 유지해야 합니다.

## Guidelines

### Help Bubble 넓이

![Help Bubble 넓이 예시](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/431ffecc-70e2-4006-a853-a20a850e8508)

Help Bubble의 기본 최대 넓이는 280px입니다. 본문 타이포를 기준으로 한 줄에 20자 안팎이 들어가서, 보조 안내 문구 한 문장이 2~3줄에 담기는 넓이입니다.

Help Bubble이 사용되는 위치와 내용에 따라 다른 넓이가 필요하다면 사용처에서 최대 넓이를 직접 지정해주세요.

### Help Bubble와 Trigger 요소 간격

![Help Bubble과 Trigger 요소 간의 간격 - 최소 4px 유지](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/e677af2f-02c6-411f-8d22-13530cc8a121)

Help Bubble은 Trigger 요소와 최소 4px의 간격을 유지해야 합니다. 사용처는 상황에 따라서 유연하게 간격을 조정할 수 있습니다.

### 화면을 기준으로 Overflow 되는 경우

![Help Bubble이 화면에서 Overflow 없이 표시되는 예시](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/311f89a5-bdb0-437a-97ed-d177666d0e0b)

![Placement: Bottom-Left인 Help Bubble이 화면에서 Overflow가 발생해 Flip된 예시](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/460022e3-5ee8-48ce-bd6e-a9511643f338)

Help Bubble은 Trigger 위치나 화면내 의도한 위치에 따라서 화면의 사방면 끝에 위치할 수 있습니다. 이런 경우 Help Bubble 구현 로직에 따라서 Help Bubble의 위치가 조정됩니다.

![Help Bubble Arrow가 Trigger와 좌우 정렬을 유지하는 예시](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/91814c04-7400-4520-9495-0118f4e1fce3)

![Help Bubble Arrow가 Trigger와 상하 정렬을 유지하는 예시](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/7bc921cf-73b9-4127-8791-0ed98639c2fe)

Arrow는 기본적으로 Trigger 요소의 중앙에 위치됩니다. 따라서 Arrow 위치를 조정하는 경우는 시각 보정이나 명확한 의도가 있어야 합니다.

### Help Bubble 표시하기, 닫기

![Help Bubble을 여는 방법 - Trigger 요소 탭](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/43dcb60a-ed18-4dd5-9f7a-a30131c6ceeb)

Help Bubble은 Trigger 요소를 탭했을 때 표시되거나, 처음부터 표시된 상태로 존재할 수 있습니다.

![Help Bubble을 닫는 방법 - Trigger 요소 탭](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/d4ff2b0a-5525-400f-ae2e-f95a0091e5dc)

Close Button을 표시하지 않는 Help Bubble은 Trigger 및 Help Bubble 바깥 영역을 탭했을 때 닫히는 등, 적절한 시점에 닫혀야 합니다.

![Help Bubble을 닫는 방법 - Close Button 탭](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/9d9011e7-18e7-4f1b-ba8e-80d9aff0dc16)

Close Button을 표시하는 Help Bubble은 Close Button을 탭했을 때 닫혀야 하며, 바깥 영역을 탭했을 때 닫힐지 여부는 Help Bubble에서 제공하는 내용의 중요도에 따라 직접 결정할 수 있습니다.

![Help Bubble의 모든 위치 예시 - Bottom-Left, Top-Left, Right-Top, Left-Top, Right-Center, Left-Center, Right-Bottom, Left-Bottom, Bottom-Center, Top-Center, Bottom-Right, Top-Right](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/fc5f5b5c-7aea-48e0-bd11-57306339ea07)

## Specification

Component spec (JSON): /rootage/components/help-bubble.json