네이티브 팝업 API (Popover 속성)

과거에는 팝업이나 툴팁을 띄우려면 복잡한 자바스크립트 상태 관리와 CSS의 z-index 속성을 조작해야 했습니다. 하지만 모던 HTML에서는 글로벌 popover 속성 하나로 이 모든 것을 해결할 수 있습니다.

버튼에 popovertarget="아이디"를 주고, 팝업 요소에 popover id="아이디"를 선언하기만 하면 됩니다. 브라우저가 알아서 팝업을 최상위 레이어(Top Layer)로 띄워주며, 바깥 영역을 클릭하면 자동으로 닫히는(Light Dismiss) 기능까지 기본으로 제공합니다.

<!-- 1. 팝업을 열 트리거 버튼 -->
<!-- popovertarget 속성에 열고자 하는 팝업의 ID를 적습니다. -->
<button popovertarget="info-tooltip" class="btn">정보 보기</button>

<!-- 2. 실제 팝업 영역 -->
<!-- popover 속성만 추가하면 평소에는 display: none 상태로 숨겨집니다. -->
<div id="info-tooltip" popover class="popover-box">
  <h3>✨ 새로운 네이티브 팝업!</h3>
  <p>자바스크립트 한 줄 없이 작동합니다.</p>
  <p>바깥을 클릭하거나 ESC 키를 누르면 알아서 닫힙니다.</p>
</div>

실행 결과