HTML popover 속성 — 완전 심층 분석

Source: Dev.to

popover 속성은 다음과 같은 가벼운 오버레이를 만들 수 있는 최신 내장 방식입니다:

• 드롭다운
• 메뉴
• 툴팁
• 컨텍스트 패널
• 미니 다이얼로그

이는 네이티브 HTML이며, 의미하는 바는:

• JavaScript 라이브러리 불필요
• ARIA 해킹 불필요
• 포털 로직 불필요
• 복잡한 포커스 관리가 대부분 자동 처리

Open UI / HTML Living Standard의 일부로 추가되었으며, 현재 최신 Chromium, Safari, Firefox 버전에서 지원됩니다.

기본 개념

popover는 선언적 속성을 통해 표시/숨김을 제어할 수 있는 숨겨진 요소입니다. 다음과 같이 선언합니다:

<div popover>
  Hello Popover
</div>

이 요소는 기본적으로 숨겨져 있습니다. 표시하려면 버튼에 연결합니다:

<button popovertarget="myPopover">Open</button>

그게 전부—JavaScript가 필요 없습니다.

내부 동작 방식

popover가 열리면 display: none이 해제되고, 최상위 레이어(포털처럼)로 이동하여 모든 스태킹 컨텍스트 위에 렌더링됩니다. z-index와는 독립적으로 동작하며, overflow: hidden에 의해 잘리지 않습니다.

popover 속성 값

popover="auto" (또는 단순히 popover – 기본값)

동작

• 외부를 클릭하면 닫힘
• Esc 키를 누르면 닫힘
• 한 번에 하나의 자동 popover만 열 수 있음

메뉴, 드롭다운, 툴팁, 컨텍스트 패널에 이상적입니다.

popover="manual"

동작

• 자동으로 닫히지 않음
• JavaScript를 통해 수동으로 닫아야 함
• 여러 popover를 동시에 열 수 있음

맞춤형 열기/닫기 로직이 필요하거나 복잡한 UI를 구축할 때 사용합니다.

Popover 트리거 방법

선언적 트리거

<div popover id="myPopover">
  <button popovertarget="myPopover">Open</button>
  <div>Content</div>
</div>

토글 동작 제어

popovertargetaction 속성을 사용해 동작을 지정할 수 있습니다(toggle이 기본값이며, show 또는 hide 가능):

<button popovertarget="myPopover" popovertargetaction="show">Open</button>