syidaxdesign system
홈 가격 내 정보
ComponentsOverlays

Popover

요소 주변에 추가 설명이나 작은 콘텐츠 영역을 표시합니다.

<sy-popover>설치 안내 기본 사용법
Live preview
컴포넌트를 조작하면 여기에 결과가 표시됩니다.
코드 보기
HTML
<div style="display:inline-flex;align-self:center;margin:70px 0">
  <sy-button>상세 안내<sy-popover
      trigger="click"
      arrow
      position="bottom"
      opendelay="0"
      closedelay="100"
      animation="none"
      id="sample"
    >
      <div style="padding:12px;max-width:220px"><strong>팀 공유</strong>
        <p>프로젝트에 초대한 팀원이 함께 확인할 수 있습니다.</p>
      </div>
    </sy-popover>
  </sy-button>
</div>
<div class="demo-actions"
  style="display:flex;flex-wrap:wrap;gap:8px;margin-top:16px"
>
  <sy-button id="action-0" size="small">표시</sy-button>
  <sy-button id="action-1" size="small">숨기기</sy-button>
</div>
<output id="demo-result" aria-live="polite"></output>

<script type="module">
  const describeResult = value => JSON.stringify(value, (_key, item) => {
    if (item instanceof File) return {
      name: item.name,
      size: item.size,
      type: item.type
    };
    if (item instanceof Element) return `<${item.localName}>`;
    return item;
  }) ?? '완료';
  const actionTarget0 = document.querySelector("#sample");
  document.querySelector('#action-0').addEventListener('click', async () => {
    const result = await actionTarget0.setOpen();
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
  const actionTarget1 = document.querySelector("#sample");
  document.querySelector('#action-1').addEventListener('click', async () => {
    const result = await actionTarget1.setClose();
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
</script>

사용 가이드

#

대상 가까이에서 추가 정보나 작은 상호작용을 제공합니다. 짧은 설명은 Tooltip, 확인 질문은 Popconfirm이 알맞습니다.

내용과 위치
트리거 안에 배치하고 기본 슬롯에 내용을 넣습니다. position·arrow로 위치와 화살표를 정하면 화면 공간에 맞춰 조정됩니다.
열기 방식
click·hover·focus 중 사용 흐름에 맞는 트리거를 고르세요.
직접 제어
trigger="null"로 자동 트리거를 끄고 setOpen()·setClose() 또는 open으로 관리합니다.

예제

#

맥락 안내

버튼 가까이에서 상세 설명을 확인합니다.

코드 보기
HTML
<div style="display:inline-flex;align-self:center;margin:70px 0">
  <sy-button>상세 안내<sy-popover
      trigger="click"
      arrow
      id="sample"
    >
      <div style="padding:12px;max-width:220px"><strong>팀 공유</strong>
        <p>프로젝트에 초대한 팀원이 함께 확인할 수 있습니다.</p>
      </div>
    </sy-popover>
  </sy-button>
</div>

옆에 표시

오른쪽 공간이 부족하면 위치를 조절합니다.

코드 보기
HTML
<div style="display:inline-flex;align-self:center;margin:70px 0">
  <sy-button>상세 안내<sy-popover
      trigger="click"
      arrow
      position="right"
      id="sample"
    >
      <div style="padding:12px;max-width:220px"><strong>팀 공유</strong>
        <p>프로젝트에 초대한 팀원이 함께 확인할 수 있습니다.</p>
      </div>
    </sy-popover>
  </sy-button>
</div>

키보드 포커스

Tab으로 버튼에 진입해 안내를 확인합니다.

코드 보기
HTML
<div style="display:inline-flex;align-self:center;margin:70px 0">
  <sy-button>상세 안내<sy-popover
      trigger="focus"
      arrow
      id="sample"
    >
      <div style="padding:12px;max-width:220px"><strong>팀 공유</strong>
        <p>프로젝트에 초대한 팀원이 함께 확인할 수 있습니다.</p>
      </div>
    </sy-popover>
  </sy-button>
</div>

외부 상태에서 제어

자동 트리거 없이 앱에서 열고 닫습니다.

코드 보기
HTML
<div style="display:inline-flex;align-self:center;margin:70px 0">
  <sy-button>상세 안내<sy-popover
      trigger="null"
      arrow
      id="sample"
    >
      <div style="padding:12px;max-width:220px"><strong>팀 공유</strong>
        <p>프로젝트에 초대한 팀원이 함께 확인할 수 있습니다.</p>
      </div>
    </sy-popover>
  </sy-button>
</div>
<div class="demo-actions"
  style="display:flex;flex-wrap:wrap;gap:8px;margin-top:16px"
>
  <sy-button id="action-0" size="small">표시</sy-button>
  <sy-button id="action-1" size="small">숨기기</sy-button>
</div>
<output id="demo-result" aria-live="polite"></output>

<script type="module">
  const describeResult = value => JSON.stringify(value, (_key, item) => {
    if (item instanceof File) return {
      name: item.name,
      size: item.size,
      type: item.type
    };
    if (item instanceof Element) return `<${item.localName}>`;
    return item;
  }) ?? '완료';
  const actionTarget0 = document.querySelector("#sample");
  document.querySelector('#action-0').addEventListener('click', async () => {
    const result = await actionTarget0.setOpen();
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
  const actionTarget1 = document.querySelector("#sample");
  document.querySelector('#action-1').addEventListener('click', async () => {
    const result = await actionTarget1.setClose();
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
</script>

API reference

#

이름에 마우스를 올리거나 키보드로 선택하면 적용 코드를 확인할 수 있습니다. 터치 화면에서는 이름을 누르세요.

<sy-popover>

Properties

Attribute / PropertyTypeDefaultDescription
booleanfalse트리거를 가리키는 화살표를 표시합니다.
booleanfalse하위 메뉴가 펼쳐진 상태입니다.
'top' | 'bottom' | 'left' | 'right' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom''bottom'트리거를 기준으로 팝업을 표시할 방향입니다.
'hover' | 'click' | 'focus' | 'null''hover'목록 또는 팝업을 여는 사용자 동작입니다.
number0열기 지연 시간(ms)입니다.
number100닫기 지연 시간(ms)입니다.
booleanfalse가장 가까운 스크롤 영역의 상단에 고정합니다.
| 'none' | 'fade' | 'fade-scale' | 'zoom' | 'pop' | 'slide-top' | 'slide-bottom' | 'slide-left' | 'slide-right' | 'slide-fade-top' | 'slide-fade-bottom' | 'slide-fade-left' | 'slide-fade-right' | 'reveal-top' | 'reveal-bottom' | 'reveal-left' | 'reveal-right' | 'flip-x' | 'flip-y' | 'bounce' | 'spin''none'Enter/exit animation type. `none` (default) toggles instantly.
'x-fast' | 'fast' | 'medium' | 'slow' | 'x-slow''fast'Animation playback speed token. Maps to `--transition-*` global tokens.

Methods

MethodReturnsDescription
Promise<void>하위 메뉴를 펼칩니다.
Promise<void>항목을 닫습니다.

Slots

SlotDescription
컴포넌트의 본문 또는 자식 항목입니다.
Design SystemTab 이동 Enter 열기