---
{"id":"popover","title":"팝오버","category":"컴포넌트","order":49,"summary":"현재 항목의 짧은 상세·상호작용 설명의 사용·상태·접근성 계약.","status":"문서 기준 · UI 미검증","references":["components/popover/usage"]}
---

# 팝오버

## 목적과 사용

현재 항목의 짧은 상세·상호작용 설명에 사용합니다. 긴 다단계 편집·중첩 팝오버에는 별도 페이지/모달을 사용합니다.

## 구성과 변형

호출 컨트롤, 표시 내용, 필요 시 닫기. 변형의 외형은 각 제품의 기존 [토큰](tokens.md)을 사용합니다. Carbon의 크기·색·모서리·아이콘을 가져오지 않습니다.

## 동작 규칙

- POP-01 MUST: 링크·버튼을 내부에 넣으면 실제 키보드 접근을 보장합니다.
- POP-02 MUST: 다른 팝오버를 여는 동안 기존 열린 상태를 관리합니다.
- POP-03 SHOULD: 내용이 크면 화면 밖으로 잘라내지 말고 적합한 패턴으로 전환합니다.
- POP-04 MUST: 클릭 밖 닫힘이 진행 중 입력을 조용히 잃게 하지 않습니다.

## 접근성

실제 내용에 맞는 역할·포커스 진입·Escape·복귀를 정의합니다. 공통 [접근성 기준](accessibility.md)도 함께 적용합니다.

## 콘텐츠 예시

좋음: 사용량 용어와 자세히 보기 / 피함: 작은 팝오버 속 전체 결제 흐름.

## 우리 구현과 연결

AI 설명에도 같은 원칙을 적용하되 제품 정책 변경 기능은 별도 권한을 유지합니다.

제품별 소유 경로는 [WICKEDVPS](product-vps.md), [Panel](product-panel.md), [Blesta](product-blesta.md)와 [소스 근거](source-evidence.md)를 확인합니다. 코드 존재와 모든 사용처의 준수는 다르며, 별도 표시가 없는 제품별 준수 상태는 미검증입니다.

## 상태와 검증

스크롤·가장자리·모바일·열기 전환·외부 클릭·키보드 닫기를 확인합니다.

일반·hover·focus·실행 중·실패·성공·disabled·read-only 중 해당하는 상태를 기록합니다. 해당하지 않는 상태를 임의로 만들지 말고 이유를 남깁니다. [검증 체크리스트](testing.md)에 증거를 연결합니다.