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

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

## Anatomy

![Help Bubble의 Anatomy 이미지. Title, Description, Close Button, Arrow로 구성됩니다.](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/f3d8cb01-ff07-46f0-b082-5bb435bc63b8)

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/98dd89e3-628d-4936-9fd5-0f517117e2f2)

![Help Bubble의 Placement Property - Right-Top](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/dcd16c8f-32ea-403a-bc0c-f80a323d1814)

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/82a1e3cc-9049-4482-8f92-796693d7300c)

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

![Close Button Target Size - 38\*38px의 터치 영역](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/a4c7cbfd-d9fc-4b65-a446-682bec9ac615)

Close Button Target Size: 38\*38

### Show Description

![Help Bubble의 Show Description Property](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/ee2c2824-d116-4828-82a8-17f37e8956ab)

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

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

### Help Bubble Arrow 위치 조정

![Help Bubble Arrow 위치 조정 - 최소 14px 간격 유지](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/0fb0f2ec-dcf7-4ed3-9052-0219fcbad59b)

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

## Guidelines

### Help Bubble 넓이

![Help Bubble 넓이 예시](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/4675b88d-cb69-40ed-84f1-70b4bdc1b889)

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/e976d1db-3014-42c8-811a-e97007892986)

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

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

![Help Bubble이 화면에서 Overflow 없이 표시되는 예시](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/c1cd6708-25a4-4994-af6d-706f82e86643)

![Placement: Bottom-Left인 Help Bubble이 화면에서 Overflow가 발생해 Flip된 예시](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/80172061-f9ad-4a61-8c68-cf5c200c02ac)

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

![Help Bubble Arrow가 Trigger와 좌우 정렬을 유지하는 예시](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/258fb293-8469-4fc1-9bed-9305df2ec05b)

![Help Bubble Arrow가 Trigger와 상하 정렬을 유지하는 예시](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/a94a108f-fecf-4086-a85c-ee3c892df285)

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

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

![Help Bubble을 여는 방법 - Trigger 요소 탭](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/a0b6c66c-4a2f-4bfb-a33d-7d11933a82b4)

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

![Help Bubble을 닫는 방법 - Trigger 요소 탭](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/f3a4ffc7-45bb-447f-a517-ac206d4c7c34)

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

![Help Bubble을 닫는 방법 - Close Button 탭](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/70607958-ee2f-4719-9cf9-27a43338263f)

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/ccde4879-7b60-4390-bfbf-4326dc34138c)

## Specification

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