Popover

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

<sy-popover>설치 안내 기본 사용법

Live preview

컴포넌트를 조작하면 여기에 결과가 표시됩니다.

위치여는 동작열기 지연(ms)닫기 지연(ms)애니메이션

화살표

코드 보기

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>

기능별 예제

12개 주제에서 필요한 기능을 선택하세요. 속성 설정, 메서드 호출, 이벤트 결과와 슬롯 구성을 실행 화면과 코드로 확인할 수 있습니다.

기능 찾기

사용 예제 · Overview

선택한 예제를 직접 조작해 보세요. 여러 구성이 있는 주제는 세부 예제를 바꿀 수 있습니다.

코드 보기

HTML

예제를 불러오고 있습니다.

속성 · Trigger

설정에 따라 표시와 동작이 어떻게 달라지는지 확인하세요.

코드 보기

HTML

예제를 불러오고 있습니다.

API reference

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

`<sy-popover>`

Properties

Type	Default	Description
`boolean`	`false`	트리거를 가리키는 화살표를 표시합니다.
`boolean`	`false`	하위 메뉴가 펼쳐진 상태입니다.
`'top' \| 'bottom' \| 'left' \| 'right' \| 'topLeft' \| 'topRight' \| 'bottomLeft' \| 'bottomRight' \| 'leftTop' \| 'leftBottom' \| 'rightTop' \| 'rightBottom'`	`'bottom'`	트리거를 기준으로 팝업을 표시할 방향입니다.
`'hover' \| 'click' \| 'focus' \| 'null'`	`'hover'`	목록 또는 팝업을 여는 사용자 동작입니다.
`number`	`0`	열기 지연 시간(ms)입니다.
`number`	`100`	닫기 지연 시간(ms)입니다.
`boolean`	`false`	가장 가까운 스크롤 영역의 상단에 고정합니다.
`\| '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

Method	Returns	Description
	`Promise<void>`	하위 메뉴를 펼칩니다.
	`Promise<void>`	항목을 닫습니다.

Slots

Slot	Description
	컴포넌트의 본문 또는 자식 항목입니다.

Popover

사용 가이드

예제

맥락 안내

옆에 표시

키보드 포커스

외부 상태에서 제어

기능별 예제

사용 예제 · Overview

속성 · Animation

속성 · AnimationSpeed

속성 · Arrow

속성 · Closedelay

속성 · Open

속성 · Opendelay

속성 · Position

속성 · Sticky

속성 · Trigger

메서드 · Set Close

메서드 · Set Open

API reference

`<sy-popover>`

Properties

Methods

Slots