Popover

특정 UI 요소 위에서 해당 요소에 대한 추가적인 정보나 액션을 제공합니다. 단순히 정보를 보여주는 Tooltip과 달리, 내부에 버튼과 같이 사용자가 상호작용할 수 있는 콘텐츠를 포함할 수 있습니다.

Anatomy

  1. 1. Container
  2. 2. Heading
  3. 3. Description
  4. 4. Close button
  5. 5. Sub action
  6. 6. Action

Variants

Close button
Heading
Action

Size

최소 너비는 140px, 최대 너비는 360px로 제한합니다. 표시할 내용이 최대 너비를 초과할 경우 텍스트는 줄바꿈 처리합니다.

Close button

Close button을 추가해 사용자가 직접 요소를 닫을 수 있는 방법을 제공할 수 있습니다. 내부에 중요한 내용이나 액션이 포함되었거나, 사용자의 인터랙션이 없어도 항상 띄워져 있을 때 사용할 수 있습니다.

Action

하단에 액션 버튼을 추가하여 사용자의 행동을 유도할 수 있습니다. 주요 액션과 보조 액션으로 구성할 수 있으며, 최대 2개까지 사용하는 것을 권장합니다.

Mode

특정 요소를 클릭하거나 탭할 때 띄우는 것을 기본으로 합니다. 새로운 기능 소개나 온보딩 가이드처럼 사용자의 주목이 필요한 경우, 사용자의 별도 조작 없이 항상 표시되도록 사용할 수 있습니다.

Position

트리거 요소로부터 Top, Bottom, Right, Left로 위치를 조정하여 사용할 수 있습니다.

Usage

Display on click

특정 요소 클릭 시 표시되는 방식을 기본으로 합니다. 다만, 액션이 포함되지 않은 단순한 정보의 경우 Tooltip을 사용하는 것을 권장합니다.

Always on

첫 진입 시 온보딩 가이드나 업데이트 정보를 알리고자 할 때 별도 조작없이 항상 노출되는 방식으로 사용할 수 있습니다. 이 경우 Popover를 닫는 방식은 아래 옵션 중에서 사용자가 자유롭게 지정할 수 있습니다. 만약 스크롤 시에도 계속 노출되도록 설정했다면, Popover가 GNB(상단 메뉴) 영역에 닿았을 때 잠시 사라지도록 처리해 화면 가림을 방지하는 것을 권장합니다.

  • 스크롤 또는 외부 영역 클릭 시 닫기
  • Popover를 표시한 요소 클릭 시 닫기
  • 닫히지 않도록 고정

How to use

Do

Popover는 한 번에 하나만 표시합니다.

Don’t

단순한 정보를 안내할 경우 Popover를 사용하지 않습니다.

Customize

Popover
backgroundColor
contents

© 2026 Wanted Lab, Inc.