Overview

Brand

Foundations

Components

Accordion

Bottom Sheet

Buttons

Checkbox

Dropdown

Label

Modal

Pagination

Radio Button

Select

Snackbar

Table

Tabs

Text Field

Textarea

Toast

Tooltip

Components

Overview

Brand

Foundations

Components

Accordion

Bottom Sheet

Buttons

Checkbox

Dropdown

Label

Modal

Pagination

Radio Button

Select

Snackbar

Table

Tabs

Text Field

Textarea

Toast

Tooltip

Components

Overview

Brand

Foundations

Components

Accordion

Bottom Sheet

Buttons

Checkbox

Dropdown

Label

Modal

Pagination

Radio Button

Select

Snackbar

Table

Tabs

Text Field

Textarea

Toast

Tooltip

Components

Overview

Brand

Foundations

Components

Accordion

Bottom Sheet

Buttons

Checkbox

Dropdown

Label

Modal

Pagination

Radio Button

Select

Snackbar

Table

Tabs

Text Field

Textarea

Toast

Tooltip

Components

Overview

Brand

Foundations

Components

Accordion

Bottom Sheet

Buttons

Checkbox

Dropdown

Label

Modal

Pagination

Radio Button

Select

Snackbar

Table

Tabs

Text Field

Textarea

Toast

Tooltip

Tooltip

Tooltip

Tooltip

Tooltip 컴포넌트는 특정 요소에 대한 추가 정보를 제공하기 위해 사용하는 컴포넌트입니다. 사용자가 요소 위에 마우스를 올리거나 클릭할 때 노출하는 것이 기본이며 예외적으로 특정 화면과 요소에서 고정된 상태로 정보를 제공할 수 있습니다.

Tooltip

Tooltip 컴포넌트는 특정 요소에 대한 추가 정보를 제공하기 위해 사용하는 컴포넌트입니다. 사용자가 요소 위에 마우스를 올리거나 클릭할 때 노출하는 것이 기본이며 예외적으로 특정 화면과 요소에서 고정된 상태로 정보를 제공할 수 있습니다.

Tooltip

Tooltip 컴포넌트는 특정 요소에 대한 추가 정보를 제공하기 위해 사용하는 컴포넌트입니다. 사용자가 요소 위에 마우스를 올리거나 클릭할 때 노출하는 것이 기본이며 예외적으로 특정 화면과 요소에서 고정된 상태로 정보를 제공할 수 있습니다.

Anatomy

ESSENTIAL

1. 레이블

사용자에게 추가적인 정보(ex. 단축키), 설명, 가이드를 제공하는 역할을 하며 짧고 명확한 문장으로 구성해야 합니다. 줄바꿈이 필요한 경우에도 가독성을 해치지 않도록 제한적으로 사용합니다.

OPTIONAL

2. 닫기 버튼

Tooltip 노출을 종료하는 버튼입니다. Tooltip이 지속적으로 노출되지 않아야 하는 경우에 사용됩니다. 단순 정보성 Tooltip(hover 기반, 일시 노출)에는 생략할 수 있습니다.

Anatomy

ESSENTIAL

1. 레이블

사용자에게 추가적인 정보(ex. 단축키), 설명, 가이드를 제공하는 역할을 하며 짧고 명확한 문장으로 구성해야 합니다. 줄바꿈이 필요한 경우에도 가독성을 해치지 않도록 제한적으로 사용합니다.

OPTIONAL

2. 닫기 버튼

Tooltip 노출을 종료하는 버튼입니다. Tooltip이 지속적으로 노출되지 않아야 하는 경우에 사용됩니다. 단순 정보성 Tooltip(hover 기반, 일시 노출)에는 생략할 수 있습니다.

Anatomy

ESSENTIAL

1. 레이블

사용자에게 추가적인 정보(ex. 단축키), 설명, 가이드를 제공하는 역할을 하며 짧고 명확한 문장으로 구성해야 합니다. 줄바꿈이 필요한 경우에도 가독성을 해치지 않도록 제한적으로 사용합니다.

OPTIONAL

2. 닫기 버튼

Tooltip 노출을 종료하는 버튼입니다. Tooltip이 지속적으로 노출되지 않아야 하는 경우에 사용됩니다. 단순 정보성 Tooltip(hover 기반, 일시 노출)에는 생략할 수 있습니다.

State

State

State

Properties

Position

top-start, top , top-end, bottom-start, bottom, bottom-end, left, right

Color

gray, purple

Close icon

false, true

Properties

Position

top-start, top , top-end, bottom-start, bottom, bottom-end, left, right

Color

gray, purple

Close icon

false, true

Properties

Position

top-start, top , top-end, bottom-start, bottom, bottom-end, left, right

Color

gray, purple

Close icon

false, true

Spec


Position

Tooltip은 기준 요소를 중심으로 주변 관계에 따라 적절한 위치를 선택해서 사용합니다.



Spacing

요소와 Tooltip 사이의 간격은 4px로 통일하여 사용합니다.

Spec

Position

Tooltip은 기준 요소를 중심으로 주변 관계에 따라 적절한 위치를 선택해서 사용합니다.


Spacing

요소와 Tooltip 사이의 간격은 4px로 통일하여 사용합니다.

Spec


Position

Tooltip은 기준 요소를 중심으로 주변 관계에 따라 적절한 위치를 선택해서 사용합니다.



Spacing

요소와 Tooltip 사이의 간격은 4px로 통일하여 사용합니다.

Usage

Do

Tooltip 텍스트는 두 줄 이상으로 확장하여 사용할 수 있습니다.

Don't

Tooltip 안에 버튼, 링크와 같은 인터랙션 요소를 포함할 수 없습니다.

Usage

Do

Tooltip 텍스트는 두 줄 이상으로 확장하여 사용할 수 있습니다.

Don't

Tooltip 안에 버튼, 링크와 같은 인터랙션 요소를 포함할 수 없습니다.

Usage

Do

Tooltip 텍스트는 두 줄 이상으로 확장하여 사용할 수 있습니다.

Don't

Tooltip 안에 버튼, 링크와 같은 인터랙션 요소를 포함할 수 없습니다.

Prev

Toast

Prev

Toast

Prev

Toast

Contact Us

©Codeit

Contact Us

©Codeit

Contact Us

©Codeit