Tooltip
툴팁은 설명이 필요한 요소를 가리켜 정보를 제공하는 말풍선입니다.
Version 1.0기본 원칙
- 설명이 필요한 요소를 정확하게 가리킵니다.
- 일정 시간 이후 자동으로 사라지거나 고객이 닫을 수 있어야 합니다.
- 누구나 이해할 수 있는 정보를 제공합니다.
사이즈
높이에 따라 L 42, M 32, S 26 총 세 단계로 나뉩니다. 이 중 M 32를 기본 사이즈로 활용합니다. 폭은 글 길이에 따라 변합니다.
모양
포인터의 위치에 따라 크게 상하좌우 네 종류의 모양을 가집니다.
포인터가 위나 아래에 붙는 경우, 가리키는 요소의 가운데에 맞추어 위치를 변경할 수 있습니다.
구조
1. 컨테이너
툴팁의 모든 구성요소를 담은 영역입니다. 특정 위치를 가리킬 수 있는 포인터가 포함되어 있습니다.
2. 본문
툴팁이 가리키는 대상에 관해 알아야 할 내용을 쉽고 간결한 글로 표현합니다.
기본적으로 모든 문장 끝에 마침표를 붙입니다. 단, 명사 또는 명사형 종결 어미로 끝나는 문구는 마침표를 생략합니다.
3. 아이콘
왼쪽에는 툴팁의 내용과 관련된 아이콘을 사용합니다. 아웃라인 또는 필 아이콘을 사용할 수 있습니다.
오른쪽에는 ‘닫기’ 혹은 ‘더 보기’와 같이 기능을 가진 아이콘을 사용합니다.
사용
층위 구분
툴팁은 항상 설명하는 요소보다 앞에 위치합니다.
툴팁을 다른 요소 앞에 배치
툴팁과 다른 요소를 동일한 층위에 배치
노출 방식
툴팁은 일반적으로 일정시간 이후 자동으로 사라집니다.
자동으로 사라지는 툴팁에는 내용을 최대한 짧게 작성합니다.
75%가 선택한 배송주기
75%의 고객이 이 배송주기로 정기배송을 신청하였습니다.
넛지 효과를 위해 노출 시간을 늘리고 싶은 경우 툴팁이 자동으로 사라지지 않도록 설정할 수 있습니다. 이때, 고객이 직접 툴팁을 닫을 수 있는 버튼을 추가해야 합니다.
자동으로 사라지지 않는 툴팁을 사용할 때 닫기 버튼을 함께 제공
스펙
아래는 Android DP L 사이즈 기준의 규칙입니다. 사이즈별 상세 규칙은 스펙 가이드에서 확인하세요.
연관 컴포넌트
리소스
스펙 가이드를 확인할 수 있습니다.
개발 가이드라인을 확인할 수 있습니다