Tooltip
Tooltip은 특정 요소에 대한 추가 정보를 제공하기 위해 사용하는 컴포넌트입니다. 사용자가 요소 위에 마우스를 올리거나 클릭할 때, 또는 특정 화면에 진입했을 때 정보를 제공합니다.
Tooltip
Tooltip은 특정 요소에 대한 추가 정보를 제공하기 위해 사용하는 컴포넌트입니다. 사용자가 요소 위에 마우스를 올리거나 클릭할 때, 또는 특정 화면에 진입했을 때 정보를 제공합니다.
Tooltip
Tooltip은 특정 요소에 대한 추가 정보를 제공하기 위해 사용하는 컴포넌트입니다. 사용자가 요소 위에 마우스를 올리거나 클릭할 때, 또는 특정 화면에 진입했을 때 정보를 제공합니다.
Anatomy
ESSENTIAL
1. 툴팁 텍스트
정보나 설명을 제공하는 본문입니다.
OPTIONAL
2. 닫기 버튼
선택적으로 제공되며, Tooltip이 지속적으로 노출되지 않아야 하는 경우에 사용됩니다.
Anatomy
ESSENTIAL
1. 툴팁 텍스트
정보나 설명을 제공하는 본문입니다.
OPTIONAL
2. 닫기 버튼
선택적으로 제공되며, Tooltip이 지속적으로 노출되지 않아야 하는 경우에 사용됩니다.
Anatomy
ESSENTIAL
1. 툴팁 텍스트
정보나 설명을 제공하는 본문입니다.
OPTIONAL
2. 닫기 버튼
선택적으로 제공되며, Tooltip이 지속적으로 노출되지 않아야 하는 경우에 사용됩니다.
State
Control
color
Gray
Purple
X mark
Control
color
Gray
Purple
X mark
Control
color
Gray
Purple
X mark
Properties
position | top-start, top , top-end, left,right, bottom-start, bottom, bottom-end |
color | gray, purple |
icon | false, true |
text | string |
Properties
position | top-start, top , top-end, left,right, bottom-start, bottom, bottom-end |
color | gray, purple |
icon | false, true |
text | string |
Properties
position | top-start, top , top-end, left,right, bottom-start, bottom, bottom-end |
color | gray, purple |
icon | false, true |
text | string |
Spec
 | PositionToolip은 기준 요소를 중심으로 주변 관계에 |
 | Spacing요소와 Tooltip 사이의 간격은 4px로 |
Spec
Position
Toolip은 기준 요소를 중심으로 주변 관계에 따라 적절한 위치를 선택해서 사용합니다.
Spacing
요소와 Tooltip 사이의 간격은 4px로 통일하여 사용합니다.
Spec
| PositionToolip은 기준 요소를 중심으로 주변 관계에 |
| Spacing요소와 Tooltip 사이의 간격은 4px로 |
Usage
Do
Tooltip 텍스트는 두 줄 이상으로 확장하여 사용할 수 있습니다.
Don't
Tooltip 안에 버튼, 링크와 같은 인터랙션 요소를 포함할 수 없습니다.
Usage
Do
Tooltip 텍스트는 두 줄 이상으로 확장하여 사용할 수 있습니다.
Don't
Tooltip 안에 버튼, 링크와 같은 인터랙션 요소를 포함할 수 없습니다.
Usage
Do
Tooltip 텍스트는 두 줄 이상으로 확장하여 사용할 수 있습니다.
Don't
Tooltip 안에 버튼, 링크와 같은 인터랙션 요소를 포함할 수 없습니다.