Skip to Content

Tooltip Usage

사용자가 특정 요소에 커서를 올릴 때 추가적인 정보나 컨텍스트를 제공합니다.

Layout

Placement

항목의 정렬에 맞추어 tooltip을 노출합니다. Tooltip이 제공되는 맥락 컴포넌트와 tooltip의 간격2px로 유지합니다.

Tooltip Layout Placement

Behaviors

Interactions

Name

Icon button 위에 커서를 올렸을 때 해당 항목의 이름을 보여줄 수 있습니다. 단축키가 있는 경우 함께 표기할 수 있습니다.

Tooltip Behaviors Interactions Name

Truncate 된 텍스트에 대해 전체 정보를 보여줄 수 있습니다.

Tooltip Behaviors Interactions Name

Info

Tooltip icon에 커서를 올리면 나타나는 사용자에게 유용할 수 있는 정보를 표현할 수 있습니다.

Tooltip Behaviors Interactions Info

Hidden Item

Counter badge에 커서를 올리면 숨겨진 정보가 tooltip을 통해 보여질 수 있습니다.

Tooltip Behaviors Interactions Hidden Item

Label 또는 pred contour 위에 커서를 올리면 숨겨진 label 정보가 tooltip을 통해 보여질 수 있습니다.

Tooltip Behaviors Interactions Hidden Item