Popover 팝오버

클릭/마우스 오버로 트리거되는 정보 플로팅 레이어입니다. 12개 방위, 네 가지 트리거 방식, 화살표와 너비 맞춤 설정을 지원합니다.

팝오버

<template>
  <div class="demo-col" style="padding: 40px 0">
    <div class="demo-row" style="gap: 24px; flex-wrap: wrap; justify-content: center">
      <LhPopover title="제목" content="click 트리거 (기본)" placement="top">
        <LhButton>click 상단</LhButton>
      </LhPopover>
      <LhPopover content="click 트리거" placement="right" trigger="click">
        <LhButton>click 우측</LhButton>
      </LhPopover>
      <LhPopover content="focus 트리거" placement="bottom" trigger="focus">
        <LhButton>focus 하단</LhButton>
      </LhPopover>
      <LhPopover content="화살표 끄기 + 너비 맞춤 설정" placement="left" :arrow="false" :width="240">
        <LhButton>화살표 없음 좌측</LhButton>
      </LhPopover>
      <LhPopover content="left에 엄격하게 배치" placement="left" :flip="false">
        <LhButton>flip=false</LhButton>
      </LhPopover>
    </div>
    <p class="demo-note">manual 트리거는 :visible.sync로 수동 제어합니다. disabled는 팝업을 비활성화하고, popperClass로 맞춤 클래스명을 지정합니다.</p>
    <div class="demo-row" style="gap: 24px; flex-wrap: wrap; justify-content: center">
      <LhPopover :visible.sync="manual" content="버튼 스위치로 제어" placement="top" trigger="manual">
        <LhButton @click="manual = !manual">manual 스위치 ({{ manual ? '켜짐' : '꺼짐' }})</LhButton>
      </LhPopover>
      <LhPopover content="비활성화 상태" disabled>
        <LhButton disabled>disabled</LhButton>
      </LhPopover>
      <LhPopover content="지연 표시/숨김" placement="top" :show-after="300" :hide-after="500">
        <LhButton>showAfter/hideAfter</LhButton>
      </LhPopover>
    </div>
  </div>
</template>

<script>
export default {
  data: () => ({
    manual: false,
  }),
}
</script>

Props

프로퍼티	설명	타입	기본값
placement	표시 위치	'top' \| 'top-start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end' \| 'left' \| 'left-start' \| 'left-end' \| 'right' \| 'right-start' \| 'right-end'	'top'
flip	주축 방향 공간이 부족할 때 방향을 반전할지 여부 (기본 활성화). false로 설정하면 placement에 엄격하게 배치되며, 뷰포트 밖으로 넘칠 수 있음	boolean	true
trigger	트리거 방식	'click' \| 'hover' \| 'focus' \| 'manual'	'hover'
title	제목	string	—
visible	수동으로 제어하는 표시 상태 (:visible.sync)	boolean	—
disabled	비활성화 여부	boolean	false
arrow	화살표 표시 여부	boolean	true
width	팝업 레이어 너비	string \| number	—
popperClass	팝업 레이어 맞춤 클래스명	string	—
teleportTarget	팝업 레이어 마운트 대상 (선택자 또는 요소, 기본 body. 2.7은 Teleport가 없어 host 이동으로 구현)	string \| HTMLElement	—
showAfter	표시 지연 시간(ms)	number	—
hideAfter	숨김 지연 시간(ms)	number	—
themeVars	컴포넌트 수준 테마 변수, ConfigProvider 설정 덮어쓰기	Record<string, string>	—
bgPattern	컴포넌트 수준 배경 문양, ConfigProvider 설정 덮어쓰기	string	—
sx	sx 레이아웃 단축 속성 (트리거 루트 요소에 적용)	—	—

슬롯

슬롯	설명
default	트리거
title	제목 영역 (기본적으로 title prop 사용)
content	풍선 본문 (미전달 시 content prop 사용)