HTML popover 전역 특성: 팝오버 요소로 설정

HTML popover 전역 특성은 요소를 팝오버 요소로 지정합니다.

값

popover 특성에는 다음 값 중 하나를 사용합니다.

auto 또는 빈 문자열

사용자가 팝오버 요소 밖과 상호작용하거나 Esc 키를 누르면 자동으로 닫히며, 열릴 때 다른 auto 팝오버들을 닫습니다. 단, 부모가 auto 팝오버라면 부모는 닫지 않습니다.

hint

열릴 때 auto 팝오버는 닫지 않지만, 다른 hint 팝오버는 닫습니다. ‘가볍게’ 닫을 수 있고, Esc 등 닫기 요청에 반응합니다.

manual

팝오버 요소가 ‘가볍게’ 닫히지 않으므로 사용자가 직접 닫아야 합니다. 열거나 닫으려면 JavaScript를 사용하거나, 명시적인 보이기/숨기기/토글 명령 버튼을 사용해야 합니다. 동시에 여러 manual 팝오버를 열 수 있습니다.

설명

팝오버 요소는 호출/제어 요소(popovertarget 특성을 추가한 <button> 또는 <input type="button">)와의 상호작용, 또는 HTMLElement.showPopover() 호출에 의해 열리기 전까진 display: none으로 숨겨집니다.

열린 팝오버 요소는 최상위 레이어에 나타나며, 부모 요소의 position이나 overflow 스타일에 영향을 받지 않습니다.

더 자세한 정보는 Popover API 랜딩 페이지를 참고하세요.

예제

자동 팝오버

팝오버를 열고, 아무데나 다른 곳을 클릭하면 자동으로 닫힙니다.

<button popovertarget="popover">팝오버 열기</button>
<div id="popover" popover>팝오버 내용</div>

수동 팝오버

팝오버가 열리면 “팝오버 열기” 버튼을 다시 누르거나, 팝오버 내의 “닫기” 버튼 클릭 전엔 닫히지 않습니다.

<button popovertarget="popover" type="button">팝오버 열기</button>
<div id="popover" popover="manual">
  팝오버 내용
  <button popovertarget="popover" type="button">닫기</button>
</div>

명세

HTML Standard

브라우저 호환성