Popover
팝오버
팝오버는 여는 버튼에 딱 붙어 있는 작은 패널이에요. 화면을 막지 않고도 여러 내용과 버튼을 담을 수 있어요.
popover attribute / Popover실제 예시
아바타를 선택하여 작은 프로필을 엽니다. 사람의 역할, 연락처 세부 정보, 팔로우 동작을 보여줍니다.
주요 부분
- 01트리거
- 02Anchored or modal surface
- 03Focus boundary
- 04Dismiss path
사용할 때
내용이 트리거 옆에 있어야 하며 사람들이 페이지를 계속 사용할 수 있을 때 사용하십시오.
다음 경우에는 사용하지 마세요
짧은 라벨 전용 힌트에 절대 사용하지 마세요. 대신 툴팁을 사용하세요.
코드에서 사용된 이름
popover attribute / Popover 출시하기 전에
Move focus on purpose. Keep it inside only when the overlay blocks the page. Support Escape and a visible close button, then return focus to the opener. Keep entered data and check small-screen, loading, and failure states.
Outcome：Complete the task with 팝오버 (Popover)。 User context：아바타를 선택하여 작은 프로필을 엽니다. 사람의 역할, 연락처 세부 정보, 팔로우 동작을 보여줍니다. Recommended pattern：팝오버 (Popover)。 Why it fits：내용이 트리거 옆에 있어야 하며 사람들이 페이지를 계속 사용할 수 있을 때 사용하십시오. Do not use it when：짧은 라벨 전용 힌트에 절대 사용하지 마세요. 대신 툴팁을 사용하세요. Product requirements: Define the default, loading, empty, error, success, and recovery states. Keep user input. Give clear feedback after every action. Accessibility and resilience: Use semantic HTML, full keyboard access, and visible focus. Make the layout work when zoomed and support reduced motion. Follow the project’s current rules. Do not add a new UI library unless the project already uses it. Acceptance criteria: The main task works with keyboard only and at 320px width. Focus and status changes are announced. Check loading, failure, retry, cancel, and reduced-motion paths. Evidence and limits (evidence boundary)：이 표준은 나열된 범위만 적용합니다. 시각적 스타일, 제품 결정, 또는 Vibulary 예시는 선택하지 않습니다. Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.
이 요청을 확인하세요
Review how 팝오버 (Popover) is used now. Definition: 팝오버는 여는 버튼에 딱 붙어 있는 작은 패널이에요. 화면을 막지 않고도 여러 내용과 버튼을 담을 수 있어요. Release checks: Move focus on purpose. Keep it inside only when the overlay blocks the page. Support Escape and a visible close button, then return focus to the opener. Keep entered data and check small-screen, loading, and failure states. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.