툴팁 대 호버 카드
Tooltip은 짧은 이름이나 힌트를 줘. Hover card는 사람이나 항목, 링크에 대한 자세한 미리보기를 보여줘.
몇 단어만으로 충분할 때는 툴팁을 사용하세요. 미리보기를 통해 다른 페이지로 이동하지 않아도 될 때는 호버 카드를 사용하세요. 키보드와 터치에서도 작동해야 합니다.
각 패턴이 무엇을 하는지 확인하세요
각 예제를 시도해 보세요. 그런 다음 그것이 수행하려는 작업에 대해 읽어보세요.
툴팁
Tooltip은 버튼 같은 컨트롤에 대한 짧은 설명이야. 마우스를 올리거나 키보드 포커스가 가면 열려. 하지만 버튼처럼 누를 수는 없어.
role="tooltip"아이콘 버튼이 키보드 포커스를 받으면 "링크 복사"가 나타납니다. 포커스는 버튼에 남습니다.
- 사용할 때
- 마우스 오버와 키보드 포커스 모두에서 짧은 컨트롤 레이블을 설명하는 데 사용하십시오.
- 다음 경우에는 사용하지 마세요
- 툴팁 안에 동작, 반드시 읽어야 하는 지침, 또는 긴 내용을 절대 넣지 마세요.
- 코드에서 사용된 이름
role="tooltip"
호버 카드
hover card는 미리 보기를 풍성하게 보여줘요. 마우스를 올리거나 선택했을 때 뜨지만, 페이지를 막지는 않아요.
HoverCard작성자 이름 위에 마우스를 올리면 짧은 소개와 팔로워 수를 볼 수 있습니다. 전체 프로필은 닫힌 상태로 유지됩니다.
- 사용할 때
- 사람들이 다음으로 어디로 갈지 선택하는 데 도움이 되는 선택적 미리보기 세부정보에 사용하세요.
- 다음 경우에는 사용하지 마세요
- 터치 장치에서 신뢰성 있게 열리지 않을 수 있으므로 호버 뒤에 필요한 정보를 절대 숨기지 마세요.
- 코드에서 사용된 이름
HoverCard
빠른 비교
| UI 패턴 | 이런 경우에 가장 좋아요 | 대상 아님 | 코드에서 사용된 이름 |
|---|---|---|---|
| 툴팁Tooltip | 마우스 오버와 키보드 포커스 모두에서 짧은 컨트롤 레이블을 설명하는 데 사용하십시오. | 툴팁 안에 동작, 반드시 읽어야 하는 지침, 또는 긴 내용을 절대 넣지 마세요. | role="tooltip" |
| 호버 카드Hover Card | 사람들이 다음으로 어디로 갈지 선택하는 데 도움이 되는 선택적 미리보기 세부정보에 사용하세요. | 터치 장치에서 신뢰성 있게 열리지 않을 수 있으므로 호버 뒤에 필요한 정보를 절대 숨기지 마세요. | HoverCard |
출시하기 전에
- 01
그 사람이 해야 할 일을 적으세요.
- 02
키보드, 포커스, 터치, 확대/축소, 로딩, 비어 있음, 오류 상태를 테스트하세요.
- 03
사람들이 마우스 오버나 동작 없이 동일한 정보를 얻을 수 있도록 하세요.
- 04
작은 화면과 큰 화면에서 실제 콘텐츠로 테스트하세요.
비교 요청 복사 가능
팀이 패턴 사이에서 선택하는 데 도움이 필요할 때 이것을 복사하세요.
실제 사용자 흐름에 가장 적합한 패턴을 툴팁 (Tooltip)、호버 카드 (Hover Card)에서 선택하세요. 이 규칙 사용: Tooltip은 짧은 이름이나 힌트를 줘. Hover card는 사람이나 항목, 링크에 대한 자세한 미리보기를 보여줘. 작업, 콘텐츠 양, 흐름 중단 비용을 기록하세요. 키보드, 터치, 로딩, 오류, 축소 동작을 확인하세요. 선택 이유를 설명한 후 프로젝트 디자인 시스템으로 가장 작은 접근 가능한 버전을 만드세요.