팝오버 vs 툴팁
짧은 답변
Tooltip은 짧은 힌트를 줘. Popover는 더 많은 글, 선택지, 버튼을 담을 수 있어.
몇 단어만으로 충분할 때는 툴팁을 사용하세요. 페이지를 떠나지 않고 더 많이 읽거나 해야 할 때는 팝오버를 사용하세요.
각 패턴이 무엇을 하는지 확인하세요
각 예제를 시도해 보세요. 그런 다음 그것이 수행하려는 작업에 대해 읽어보세요.
Popover
↗ 팝오버
팝오버는 여는 버튼에 딱 붙어 있는 작은 패널이에요. 화면을 막지 않고도 여러 내용과 버튼을 담을 수 있어요.
popover attribute / Popover아바타를 선택하여 작은 프로필을 엽니다. 사람의 역할, 연락처 세부 정보, 팔로우 동작을 보여줍니다.
- 사용할 때
- 내용이 트리거 옆에 있어야 하며 사람들이 페이지를 계속 사용할 수 있을 때 사용하십시오.
- 다음 경우에는 사용하지 마세요
- 짧은 라벨 전용 힌트에 절대 사용하지 마세요. 대신 툴팁을 사용하세요.
- 코드에서 사용된 이름
popover attribute / Popover
Tooltip
↗ 툴팁
Tooltip은 버튼 같은 컨트롤에 대한 짧은 설명이야. 마우스를 올리거나 키보드 포커스가 가면 열려. 하지만 버튼처럼 누를 수는 없어.
role="tooltip"아이콘 버튼이 키보드 포커스를 받으면 "링크 복사"가 나타납니다. 포커스는 버튼에 남습니다.
- 사용할 때
- 마우스 오버와 키보드 포커스 모두에서 짧은 컨트롤 레이블을 설명하는 데 사용하십시오.
- 다음 경우에는 사용하지 마세요
- 툴팁 안에 동작, 반드시 읽어야 하는 지침, 또는 긴 내용을 절대 넣지 마세요.
- 코드에서 사용된 이름
role="tooltip"
빠른 비교
| UI 패턴 | 이런 경우에 가장 좋아요 | 대상 아님 | 코드에서 사용된 이름 |
|---|---|---|---|
| 팝오버Popover | 내용이 트리거 옆에 있어야 하며 사람들이 페이지를 계속 사용할 수 있을 때 사용하십시오. | 짧은 라벨 전용 힌트에 절대 사용하지 마세요. 대신 툴팁을 사용하세요. | popover attribute / Popover |
| 툴팁Tooltip | 마우스 오버와 키보드 포커스 모두에서 짧은 컨트롤 레이블을 설명하는 데 사용하십시오. | 툴팁 안에 동작, 반드시 읽어야 하는 지침, 또는 긴 내용을 절대 넣지 마세요. | role="tooltip" |
출시하기 전에
- 01
그 사람이 해야 할 일을 적으세요.
- 02
키보드, 포커스, 터치, 확대/축소, 로딩, 비어 있음, 오류 상태를 테스트하세요.
- 03
사람들이 마우스 오버나 동작 없이 동일한 정보를 얻을 수 있도록 하세요.
- 04
작은 화면과 큰 화면에서 실제 콘텐츠로 테스트하세요.
04
비교 요청 복사 가능
팀이 패턴 사이에서 선택하는 데 도움이 필요할 때 이것을 복사하세요.
실제 사용자 흐름에 가장 적합한 패턴을 팝오버 (Popover)、툴팁 (Tooltip)에서 선택하세요. 이 규칙 사용: Tooltip은 짧은 힌트를 줘. Popover는 더 많은 글, 선택지, 버튼을 담을 수 있어. 작업, 콘텐츠 양, 흐름 중단 비용을 기록하세요. 키보드, 터치, 로딩, 오류, 축소 동작을 확인하세요. 선택 이유를 설명한 후 프로젝트 디자인 시스템으로 가장 작은 접근 가능한 버전을 만드세요.