Tooltip 툴팁

마우스 hover 시 힌트 정보를 표시할 때 자주 사용합니다.

기본 사용법

위치와 트리거 방식

import { LhButton, LhTooltip } from '@lh-ui/react'

export default function Demo() {
  return (
    <>
      <LhTooltip content="위쪽 힌트" placement="top">
        <LhButton>위쪽</LhButton>
      </LhTooltip>
      <LhTooltip content="클릭 트리거" trigger="click">
        <LhButton>클릭</LhButton>
      </LhTooltip>
      <LhTooltip content="의미색 힌트" type="success">
        <LhButton>의미색</LhButton>
      </LhTooltip>
    </>
  )
}

Tooltip Props

프로퍼티	설명	타입	옵션	기본값
content	힌트 콘텐츠	string	—	—
placement	표시 위치	LhTooltipPlacement	top / bottom / left / right (-start / -end 포함)	'top'
trigger	트리거 방식	'hover' | 'click' | 'focus'	—	'hover'
disabled	힌트 비활성화	boolean	—	false
visible	제어형 표시	boolean	—	—
defaultVisible	비제어 기본 표시	boolean	—	false
showAfter / openDelay	표시 지연(ms, 서로 별칭)	number	—	0
hideAfter / closeDelay	숨김 지연(ms, 서로 별칭)	number	—	0
effect	테마	'dark' | 'light'	—	'dark'
type	의미색 유형(effect 배경색 덮어쓰기)	'primary' | 'success' | 'warning' | 'danger' | 'info'	—	—
bgColor	커스텀 배경색(effect와 type 덮어쓰기)	string	—	—
maxWidth	최대 너비	string | number	—	'200px'
themeVars	컴포넌트 수준 테마 변수	Record<string, string>	—	—
sx	간편 레이아웃 프로퍼티(트리거에 적용)	SxProps	—	—

Tooltip 이벤트

이벤트	설명	콜백 시그니처	Vue 대응
onVisibleChange	표시 변경(제어 및 비제어 모두에서 발생)	(visible: boolean) => void	update:visible

ref

forwardRef<HTMLDivElement> — 트리거 루트 요소. LhTooltipInstance는 show() / hide() / toggle()를 노출합니다.

제어 단순화

plus와 달리, 이 라이브러리는 manual 스위치가 없습니다: visible을 전달하면 제어형이 되고 onVisibleChange가 외부에 알립니다. 자세한 내용은 마이그레이션 가이드를 참조하세요.

스크롤 시 닫기

트리거가 뷰포트를 벗어나면 힌트가 자동으로 닫힙니다(onScrollOut). fixed 오버레이가 페이지 콘텐츠 위에 떠 있는 것을 막기 위함입니다.

스타일

import '@lh-ui/react/style/tooltip'