Tooltip

사용자가 특정 UI 요소에 마우스를 올리거나 포커스를 맞출 때 나타나는 작은 정보 상자입니다. 주로 추가적인 설명이나 힌트를 제공하여 사용자가 해당 요소의 기능이나 의미를 이해하는 데 도움을 줍니다.툴팁은 일반적으로 짧고 간결한 텍스트로 구성되며, 사용자가 인터페이스를 탐색할 때 직관적인 경험을 제공합니다.

Anatomy

Anatomy

  • UI trigger button
  • Close button
  • Text area
  • Container

Spec

  • Spacing

    Spacing

    컨테이너 상하좌우 여백은 30으로 고정합니다. 텍스트 영역은 좌측정렬을 기본으로 툴팁의 높이값은 가변됩니다.

  • Text

    Text

    텍스트 영역은 타이틀과 상세 영역으로 구분하며, 타이틀 영역은 좌측 정렬을 기본으로 합니다.

  • Text

    Text

    트리거 버튼은 Text label 크기에 따라 설정합니다. Text label 크기가 20 이상 일 경우 22px 아이콘/좌측 여백 4 사용, 크기가 16 이하 일 경우 16px 아이콘/좌측 여백 4 을 사용합니다.

Usage

Do

Do

사용자에게 2차적으로 제공되어야 하는 정보가 있다면 사용자가 정보를 직접 찾게 하는 것이 아니라 툴팁 UI에 포함시키는 것이 좋습니다.

Don't

Don't

툴팁 사용 시 너무 많은 양의 정보를 전달해야하거나 뷰포트를 벗어나는 경우에는 툴팁 대신 팝업으로 대체하여 사용하도록 합니다. 모바일 환경의 경우 디테일 툴팁 대신 항상 팝업으로 사용합니다.

© KYOBO BOOK CENTRE교보문고 바로가기