Tooltip 툴팁

호버/클릭/포커스로 트리거되는 플로팅 레이어 안내입니다. fixed 배치 + 뷰포트 반전(flip/shift)을 지원하고, 트리거가 뷰포트를 벗어나면 자동으로 접힙니다.

문자 안내

<template>
  <div class="demo-row" style="justify-content: center; padding: 56px 0 72px">
    <LhTooltip content="위쪽 안내" placement="top">
      <LhButton>위</LhButton>
    </LhTooltip>
    <LhTooltip content="아래쪽 안내" placement="bottom">
      <LhButton>아래</LhButton>
    </LhTooltip>
    <LhTooltip content="왼쪽 안내" placement="left">
      <LhButton>왼쪽</LhButton>
    </LhTooltip>
    <LhTooltip content="오른쪽 안내" placement="right">
      <LhButton>오른쪽</LhButton>
    </LhTooltip>
    <LhTooltip content="클릭 트리거" trigger="click">
      <LhButton type="primary">클릭</LhButton>
    </LhTooltip>
    <LhTooltip content="엄격하게 top 배치, 반전 없음" placement="top" :flip="false">
      <LhButton>엄격한 top</LhButton>
    </LhTooltip>
    <LhTooltip content="테마색 안내" type="primary">
      <LhButton>테마색</LhButton>
    </LhTooltip>
  </div>
</template>

Props

프로퍼티	설명	타입	기본값
content	안내 내용	string	''
placement	12개 방위	'top' \| 'top-start' \| … \| 'right-end'	'top'
flip	주축 공간이 부족할 때 방향을 반전; false 로 설정하면 placement 대로 엄격하게 배치	boolean	true
trigger	트리거 방식	'hover' \| 'click' \| 'focus'	'hover'
manual / visible	수동 제어 모드	boolean	false / —
showAfter / hideAfter	표시/숨김 지연 (ms)	number	0
openDelay / closeDelay	표시/숨김 지연 별칭 (showAfter/hideAfter 와 동의, 우선순위는 더 낮음)	number	—
effect	명/암 테마	'dark' \| 'light'	'dark'
type	내장 테마 색상 (effect 배경을 덮어씀)	'primary' \| 'success' \| …	—
bgColor	사용자 지정 배경색 (최우선)	string	—
maxWidth	최대 너비	string \| number	'200px'
teleportTarget	플로팅 레이어 마운트 대상 (DOM 이동으로 구현)	string \| HTMLElement	'body'
disabled / themeVars / bgPattern / sx	—	—	—

Events

표시/숨김은 트리거 로직 내부에서 관리됩니다.

메서드

manual 모드에서 인스턴스 메서드 show() / hide() / toggle()(defineExpose)를 사용합니다.

팁

sx 는 트리거의 루트 요소에 작용합니다 (popper 는 body 에 마운트되어 sx 를 적용할 수 없습니다).