Tooltip

Jul 2

GUIDE

툴팁은 주로 특정 기능이나 업데이트 된 서비스에 대한 도움말을 표시하는 데 사용합니다.  
사용자가 UI에서 직접적으로 알 수 없는 익숙하지 않은 기능에 대해 도움이 될 수 있도록 합니다.  
특정 영역(버튼 등)에 대한 프로모션이 있는 경우 부가 설명을 위해 사용하기도 합니다.

ANATOMY

툴팁의 노출될 도메인의 모든 배경색과 색상이 동일하게 겹쳐서는 안되므로 가능하면 grey shadow를 함께 사용해 입체감있게 시각적 분리를 합니다.
선택 시 해당 툴팁이 제거됩니다. 닫기 버튼을 제공하지 않는 경우, 툴팁을 제거하는 rule(아래 참고)을 따라야 합니다.
위치는 항상 상단에 고정되야 합니다.
설명하고자 하는 내용을 표기하며, 텍스트 3줄 이내로 작성하는 것을 권장합니다.
선택 시 해당 페이지로 새로운 브라우저가 열리는 액션이 실행됩니다. 링크 버튼의 레이블은 최대 1줄로 제한됩니다.
해당 텍스트가 설명하는 요소(버튼 등)에 가까이 위치를 설정합니다.
* 상하좌우 위치는 variants의 direction에서 설정하고, side, middle과 같은 세부적인 위치 설정은 각 인스턴스의 auto layout 기능을 활용해 조절합니다.
선택 시 해당 툴팁이 제거됩니다. 닫기 버튼을 제공하지 않는 경우, 툴팁을 제거하는 rule(아래 참고)을 따라야 합니다.
위치는 항상 상단에 고정되야 합니다.

TYPES & RULES

Tooltip의 구성 및 사용 규칙은 다음과 같습니다.

Text only (default)
특정 기능에 대한 간략한 설명이 제공되어야 할 때 사용하는 타입입니다. 버튼 없이 문구만 있는 툴팁에 사용합니다.
주로 특정 기능이나 업데이트 된 서비스에 대한 도움말을 표시하는 용도로 사용합니다.

사용 시기 : 쉽게 제거되므로, 안내되는 내용의 중요도가 낮을 때 사용하는 것을 권장합니다.
노출 규칙 :
- 자동 노출 : 툴팁이 필요한 화면에 진입 시 자동으로 노출
- 조건부 노출 : 정해진 조건을 갖추었을 때 노출 (예: while hovering)
삭제 조건 : 수동 제거
- 툴팁이 설명하는 특정 요소를 선택 시 영구 제거
- 툴팁이 설명하는 요소 외 타 영역 선택 또는 페이지 스크롤 시 제거
- 툴팁 자체 bg 영역 선택 시 제거
- 조건부 노출 시 이와 반대되는 액션을 취했을 경우 (stop hovering)
재노출 조건 :
1) 재노출 되는 조건 
- 툴팁이 설명하는 요소 외 타 영역 선택 또는 페이지 스크롤 시 제거되나, 해당 페이지 진입 시 재노출
- 제거하지 않고 해당 페이지 이탈 후 재 진입 시 재노출
- 새로운 브라우저에서 접근 시 재노출 
- 신규 디바이스로 접근 시 재노출 
- secret mode로 접근 시 재노출
  2) 재노출 되지 않는 조건
- 툴팁이 설명하는 특정 요소를 선택한 경우 이후 재노출 되지 않음
- 특별히 지정한 노출 기간이 종료되면 재노출 되지 아니함.
유의 사항
- 한 페이지에서 3개 이상의 툴팁을 제공하지 않습니다.
- 사용자가 위 삭제 조건에 해당하는 액션을 취하지 않았는데 사라지는 자동 제거(n초 후 사라짐)는 사용하지 않습니다.
- 툴팁 노출 시 dim 처리된 화면과 함께 사용하는 것은 되도록 지양합니다.

3. Link Button

특정 기능에 대한 간략한 설명과 함께 링크 버튼을 두어 사용자를 어딘가로 이동시키는 수단이 제공되어야 할 때 사용하는 타입입니다. 버튼을 선택하여 링크 이동을 한 경우 또는 버튼 링크 영역을 제외한 툴팁 컴포넌트 자체 선택 시 제거됩니다.
x 버튼이 없는 툴팁의 경우 text area에서 주는 message 내용의 중요도가 낮을 때 사용하길 권장합니다.

사용 시기 : 툴팁 내 텍스트로 표기된 내용과 관련된 링크를 제공하여 해당 페이지로의 이동을 유도하고 싶은 경우 사용합니다.
노출 규칙 :
- 자동 노출 : 툴팁이 필요한 화면에 진입 시 자동으로 노출
삭제 조건 : 수동 제거
- 툴팁이 설명하는 특정 요소를 선택 시 영구 제거
- 툴팁이 설명하는 요소 외 타 영역 선택 또는 페이지 스크롤 시 제거
- 툴팁 자체 bg 영역 선택 시 제거
- 링크 버튼을 선택하여 해당 페이지로 이동 한 경우 제거
재노출 조건 :
1) 재노출 되는 조건 
- 툴팁이 설명하는 요소 외 타 영역 선택 또는 페이지 스크롤 시 제거되나, 해당 페이지 진입 시 재노출 
- 제거하지 않고 해당 페이지 이탈 후 재 진입 시 재노출 
- 새로운 브라우저에서 접근 시 재노출 
- 신규 디바이스로 접근 시 재노출 
- secret mode로 접근 시 재노출
  2) 재노출 되지 않는 조건
- 툴팁이 설명하는 특정 요소를 선택한 경우 이후 재노출 되지 않음 
- 링크 버튼을 선택하여 해당 페이지로 이동 한 경우 재노출 되지 않음 
- 특별히 지정한 노출 기간이 종료되면 재노출 되지 아니함.
유의 사항
- 한 페이지에서 3개 이상의 툴팁을 제공하지 않습니다.
- 툴팁 노출 시 dim 처리된 화면과 함께 사용하는 것은 되도록 지양합니다.

2. Close Button

특정 기능에 대한 간략한 설명과 함께 x 버튼을 두어 바로 제거가 가능하도록 한 타입입니다. 닫기 버튼 선택 시 툴팁은 사라집니다.

사용 시기 : 디폴트 타입보다는 어렵게 제거되므로, 텍스트 내용의 중요도가 높을 때 사용을 권장합니다.
노출 규칙 :
- 자동 노출 : 툴팁이 필요한 화면에 진입 시 자동으로 노출
삭제 조건 : 수동 제거
- x버튼 선택 시에만 제거
- 툴팁이 설명하는 특정 요소(버튼 등)를 선택 시 영구 제거
재노출 조건 :
1) 재노출 되는 조건 
- 제거하지 않고 해당 페이지 이탈 후 재 진입 시 재노출
- 새로운 브라우저에서 접근 시 재노출 
- 신규 디바이스로 접근 시 재노출 
- secret mode로 접근 시 재노출
  2) 재노출 되지 않는 조건
- 사용자가 ‘X 버튼' 선택 시 재노출 되지 않음 
- 툴팁이 설명하는 특정 요소를 선택한 경우 이후 재노출 되지 않음 
- 특별히 지정한 노출 기간이 종료되면 재노출 되지 아니함.
유의 사항
- 한 페이지에서 2개 이상의 툴팁을 동시 제공하지 않습니다.
- 사용자가 위 ‘삭제 조건’에 해당하는 액션을 취하지 않았는데 사라지는 자동 제거(n초 후 사라짐)는 사용하지 않습니다.
- 툴팁 노출 시 dim 처리된 화면과 함께 사용하는 것은 되도록 지양합니다.

4. Multi-type (close+link button)

특정 기능에 대한 간략한 설명과 함께 링크 버튼을 두어 사용자를 어딘가로 이동시키는 수단이 제공되어야 할 때 사용하는 타입입니다. 링크 버튼을 선택하여 해당 페이지로 이동을 한 경우 또는 닫기 버튼 선택 시 툴팁은 제거됩니다.
x 버튼이 있는 툴팁의 경우 text area에서 주는 message 내용의 중요도가 높을 때 사용하길 권장합니다.

사용 시기 : [3.링크 버튼] 타입보다는 어렵게 제거됨으로써, 텍스트 내용 강조 및 링크 버튼에 연결된 페이지로의 이동이 필요한 경우 사용을 권장합니다.
노출 규칙 :
- 자동 노출 : 툴팁이 필요한 화면에 진입 시 자동으로 노출
삭제 조건 : 수동 제거
- x버튼 선택 시 제거
- 툴팁이 설명하는 특정 요소(버튼 등)를 선택 시 제거
- 링크 버튼을 선택해 해당 페이지로 이동한 경우 제거
재노출 조건 :
1) 재노출 되는 조건 
- 제거하지 않고 해당 페이지 이탈 후 재 진입 시 재노출
- 새로운 브라우저에서 접근 시 재노출 
- 신규 디바이스로 접근 시 재노출 
- secret mode로 접근 시 재노출
  2) 재노출 되지 않는 조건
- 사용자가 ‘X 버튼' 선택 시 재노출 되지 않음 
- 툴팁이 설명하는 특정 요소를 선택한 경우 이후 재노출 되지 않음 
- 특별히 지정한 노출 기간이 종료되면 재노출 되지 아니함
유의 사항
- 한 페이지에서 2개 이상의 툴팁을 제공하지 않습니다.
- 사용자가 위 ‘삭제 조건’에 해당하는 액션을 취하지 않았는데 사라지는 자동 제거(n초 후 사라짐)는 사용하지 않습니다.
- 툴팁 노출 시 dim 처리된 화면과 함께 사용하는 것은 되도록 지양합니다.