Skip to main content

Popover

MSK Popover는 버튼이나 아이콘 옆에 작게 붙는 설정, 필터, 보조 설명 패널입니다. 기존 DOM을 열고 닫는 방식으로 동작하며, 문자열 HTML을 렌더링하지 않습니다.

Preview​

Data API​

<button
  type="button"
  data-msk-popover-target="#view-options"
  data-msk-popover-placement="bottom"
>
  보기 옵션
</button>

<div id="view-options" hidden>
  <p class="msk-ui-popover__title">보기 옵션</p>
  <div class="msk-ui-popover__body">본문과 노트 표시 방식을 고릅니다.</div>
</div>

JavaScript API​

window.MSK.ui.popover.show(button);
window.MSK.ui.popover.hide();
window.MSK.ui.popover.toggle(button);

Rules​

  • 짧은 안내는 tooltip, 선택 가능한 작은 패널은 popover로 나눕니다.
  • 화면 흐름을 막아야 하면 dialog를 사용합니다.
  • Escape, outside click, resize, scroll 시 닫힙니다.