[HTML] HTML Popover API 완벽 가이드: JavaScript 없이 팝오버 만들기

웹 애플리케이션을 개발하다 보면 툴팁(Tooltip), 드롭다운 메뉴(Dropdown Menu), 컨텍스트 메뉴(Context Menu), 알림 패널 등 화면 위에 일시적으로 표시되는 UI가 필요하다.

과거에는 이러한 기능을 구현하기 위해 JavaScript 라이브러리나 직접 작성한 스크립트가 필요했다. 하지만 최근 HTML 표준에 추가된 Popover API를 사용하면 훨씬 간단하게 구현할 수 있다.

이번 글에서는 HTML Popover가 무엇인지, 사용 방법, 브라우저 지원 현황, 접근성 고려사항, 그리고 한계점과 대안을 살펴본다.

HTML Popover란?

HTML Popover는 브라우저가 기본적으로 제공하는 팝오버 UI 기능이다.

Popover API를 사용하면 JavaScript 없이도 버튼 클릭 시 특정 요소를 표시하거나 숨길 수 있다.

기존에는 다음과 같은 방식이 일반적이었다.

<button id="open">열기</button>

<div id="popup" hidden>
  내용
</div>

document.getElementById("open").addEventListener("click", () => {
  document.getElementById("popup").hidden = false;
});

Popover API는 이러한 코드를 크게 줄여준다.

<button popovertarget="info">
  열기
</button>

<div id="info" popover>
  팝오버 내용
</div>

브라우저가 자동으로 열기/닫기 동작을 처리한다.

기본 사용 방법

가장 간단한 예제는 다음과 같다.

<button popovertarget="my-popover">
  팝오버 열기
</button>

<div id="my-popover" popover>
  안녕하세요!
</div>

동작 방식:

1. popover 속성이 있는 요소를 만든다.
2. popovertarget 속성으로 연결한다.
3. 버튼을 클릭하면 팝오버가 열린다.
4. 바깥 영역을 클릭하면 자동으로 닫힌다.

JavaScript로 제어하기

Popover API는 JavaScript API도 제공한다.

<div id="popover" popover>
  팝오버 내용
</div>

const popover = document.getElementById("popover");

popover.showPopover();
popover.hidePopover();
popover.togglePopover();

사용 가능한 메서드:

메서드설명

showPopover()	팝오버 표시
hidePopover()	팝오버 숨김
togglePopover()	토글

 

Auto Popover와 Manual Popover

기본적으로 Popover는 Auto 모드로 동작한다.

<div popover>
  자동 팝오버
</div>

이는 다음과 동일하다.

<div popover="auto">
  자동 팝오버
</div>

Auto 모드 특징:

• 외부 클릭 시 닫힘
• Esc 키로 닫힘
• 한 번에 하나만 표시

Manual 모드도 존재한다.

<div popover="manual">
  수동 팝오버
</div>

Manual 모드 특징:

• 자동으로 닫히지 않음
• 개발자가 직접 제어
• 여러 개를 동시에 표시 가능

예:

popover.showPopover();

popover.hidePopover();

 

스타일 적용하기

Popover는 일반 HTML 요소이므로 CSS를 자유롭게 적용할 수 있다.

[popover] {
  border: none;
  padding: 1rem;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,.2);
}

열렸을 때만 스타일 적용도 가능하다.

[popover]:popover-open {
  animation: fade-in .2s ease;
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

 

Anchor Positioning과 함께 사용하기

Popover는 CSS Anchor Positioning과 함께 사용할 때 더욱 강력해진다.

<button id="menu-btn">
  메뉴
</button>

<div popover>
  메뉴 내용
</div>

버튼 기준으로 정확하게 위치를 지정할 수 있다.

#menu-btn {
  anchor-name: --menu-anchor;
}

[popover] {
  position-anchor: --menu-anchor;
}

드롭다운 메뉴나 컨텍스트 메뉴 구현 시 유용하다.

브라우저 지원

2026년 기준 Popover API는 대부분의 최신 브라우저에서 지원된다.

브라우저지원 여부

Chrome	지원
Edge	지원
Firefox	지원
Safari	지원
Android Chrome	지원
iOS Safari	지원

다만 오래된 브라우저에서는 지원되지 않을 수 있으므로 프로젝트 요구사항에 따라 폴리필(polyfill) 또는 대체 구현을 고려해야 한다.

기능 지원 여부는 다음과 같이 확인할 수 있다.

const supported = Object.hasOwn(HTMLElement.prototype, "showPopover");

if (supported) {
  console.log("Popover 지원");
}

웹 접근성(Accessibility)

Popover API의 가장 큰 장점 중 하나는 브라우저가 일부 접근성 기능을 기본 제공한다는 점이다.

예를 들어:

• Esc 키 지원
• 포커스 이동 처리
• 키보드 사용자 지원
• 스크린 리더와의 통합 개선

그러나 모든 접근성이 자동으로 해결되는 것은 아니다.

적절한 역할(Role) 제공

팝오버 목적에 따라 역할을 지정하는 것이 좋다.

툴팁:

<div popover role="tooltip">
  도움말
</div>

대화상자 성격:

<div popover role="dialog">
  설정 창
</div>

적절한 레이블 제공

<button
  popovertarget="help"
  aria-label="도움말 열기">
  ?
</button>

또는

<div
  id="settings"
  popover
  aria-labelledby="settings-title">

  <h2 id="settings-title">
    설정
  </h2>

</div>

 

키보드 테스트 수행

다음을 반드시 확인해야 한다.

• Tab 이동 가능 여부
• Shift+Tab 이동 가능 여부
• Esc 종료 여부
• 포커스 손실 여부

특히 복잡한 메뉴나 대화상자 형태에서는 수동 테스트가 필요하다.

Popover의 한계

Popover API는 훌륭하지만 모든 상황에 적합한 것은 아니다.

1. 완전한 Modal Dialog 대체는 아님

중요한 사용자 입력을 받는 경우에는 <dialog> 요소가 더 적합하다.

예:

• 회원가입
• 결제
• 경고 창
• 확인 대화상자

2. 포커스 관리가 제한적

복잡한 UI에서는 개발자가 직접 포커스를 제어해야 한다.

예:

• 메뉴 내부 탐색
• 커맨드 팔레트
• 다단계 메뉴

3. 레거시 브라우저 대응 필요

구형 브라우저 환경을 지원해야 하는 기업 프로젝트에서는 추가 대응이 필요할 수 있다.

4. 위치 제어 기능이 제한적

Floating UI 라이브러리 수준의 고급 위치 계산 기능은 제공하지 않는다.

예:

• 화면 경계 충돌 처리
• 자동 위치 변경
• 복잡한 오프셋 계산

대안(Alternatives)

1. dialog 요소

<dialog id="modal">
  내용
</dialog>

장점:

• 모달 지원
• 포커스 트랩 제공
• 접근성 우수

사용 사례:

• 설정 창
• 회원가입 폼
• 경고창

2. Floating UI

고급 포지셔닝이 필요한 경우 가장 많이 사용되는 라이브러리다.

장점:

• 자동 위치 계산
• 화면 경계 충돌 처리
• 다양한 프레임워크 지원

사용 사례:

• 드롭다운
• 툴팁
• 컨텍스트 메뉴

3. Headless UI

React 환경에서 접근성이 고려된 컴포넌트를 제공한다.

장점:

• 높은 접근성
• React 친화적
• 다양한 인터랙션 제공

 

 

HTML Popover API는 브라우저가 기본 제공하는 현대적인 팝오버 솔루션이다. 단순한 툴팁, 드롭다운, 메뉴, 정보 패널 등은 별도의 라이브러리 없이도 구현할 수 있으며, 코드량을 크게 줄여준다.

다만 복잡한 포커스 관리, 고급 위치 계산, 완전한 모달 기능이 필요한 경우에는 <dialog> 요소나 Floating UI 같은 전문 솔루션을 함께 검토하는 것이 좋다.

새로운 프로젝트를 시작한다면 Popover API를 기본 선택지로 고려해 볼 만하며, 특히 Web Accessibility와 표준 웹 플랫폼을 중시하는 환경에서 큰 장점을 제공한다.