툴팁
툴팁
툴팁은 버튼이나 아이콘 같은 UI 요소가 호버 상태일 때 표시되는 메시지 상자예요. UI 안의 요소를 사용자가 더 잘 이해하도록 돕는 추가 정보를 제공하는 짧은 설명이 들어 있어요.
출처: Tooltips
본문
툴팁을 작성할 때는 다음 일반 권장사항을 따르세요:
| Don't | Do |
|---|---|
| UI에서 이미 이용 가능한 정보를 반복하지 마세요. | 간결하고 명확하며 효과적인 콘텐츠를 작성하세요. |
| 중요한 정보에 툴팁을 사용하지 마세요. | 추가적이고 필수가 아닌 정보에 툴팁을 사용하세요. |
| 문장 조각을 마침표로 끝내지 마세요. | 완전한 문장은 마침표로 끝내세요. |
| 물음표 아이콘에 툴팁을 배치하지 마세요. 대신 Popover를 사용하세요. | 툴팁 콘텐츠가 모든 사용자에게 제공되도록 툴팁 개발 접근성 가이드라인을 따르세요. |
추가 지침은 툴팁 디자인 가이드라인에서 찾을 수 있어요.
아이콘 툴팁
아이콘은 UI에서 공간을 절약하고 사용자에게 또 다른 인식 방법을 제공해요.
특히 아이콘에 텍스트 라벨이 함께 있을 때가 아니라면, 아이콘에 툴팁을 배치하는 것이 종종 중요해요. 이렇게 하면 사용자가 아이콘 위에 호버해 그 아이콘이 연결된 동작을 이해할 수 있습니다. 아이콘과 함께 툴팁을 사용할 때는 아이콘을 정확하고 명확하게 식별하는 1~2개의 단어로 콘텐츠를 제한하세요.
예를 들어:
PatternFly에는 보편적 의미를 지닌 흔히 사용되는 아이콘들이 있어요. 다음 표에 나온 것처럼 이 아이콘들은 항상 같은 툴팁 설명을 사용해야 합니다:
| Icon | React name | Tooltip content | Note |
|---|---|---|---|
rh-ui-arrow-circle-up |
RhUiArrowCircleUpIcon | Upgrade | |
rh-ui-notification-fill |
RhUiNotificationFillIcon | Notifications | |
rh-ui-settings |
RhUiSettingsIcon | Settings | |
rh-ui-copy |
RhUiCopyIcon | Copy | |
rh-ui-download |
RhUiDownloadIcon | Download | |
rh-ui-ellipsis-vertical |
RhUiEllipsisVerticalIcon | More options | |
rh-ui-edit |
RhUiEditIcon | Edit | |
rh-ui-search |
RhUiSearchIcon | Search | |
rh-ui-zoom-out |
RhUiZoomOutIcon | Zoom out | |
rh-ui-zoom-in |
RhUiZoomInIcon | Zoom in | |
rh-ui-sync |
RhUiSyncIcon | Sync | 시나리오에 가장 잘 맞는 것을 선택하세요. |
rh-ui-trash |
RhUiTrashIcon | Delete | |
rh-ui-export |
RhUiExportIcon | Export | |
rh-ui-task |
RhUiTaskIcon | Tasks |
이 아이콘들의 사용법에 대해 더 알아보려면 디자인 파운데이션을 참고하세요.