Tooltip

Label

계약

Overview

Machine-readable contract from Component Spec.

component: tooltipexport: Tooltipversion: 1attributes: data-refineui=tooltip

Anatomy

Part	data-refineui
root	tooltip

States

Scope	Category	Values
component	environment	forced-colors, dir

Accessibility

Slot	Element	Role
tooltip	div	tooltip

Keyboard

Key	Action	Native
Escape	close	—

Layout

Property	Value
direction	logical
rtl	true

설치

npmyarnpnpmbun

npm install @refineui/react @refineui/tokens

사용법

import { Tooltip } from "@refineui/react";

<Tooltip trigger={<Button>Hover me</Button>} content="Helpful tooltip text" />

<Tooltip
  trigger={<IconButton icon="info" />}
  content="Extended information"
  position="Top"
  align="Center"
/>

API 레퍼런스

Prop	Default	Type	Description
trigger	—	ReactNode	툴팁을 트리거하는 요소(필수).
content	—	ReactNode	툴팁 콘텐츠(필수).
position	"Top"	"Top" | "Left" | "Bottom" | "Right"	트리거 기준 위치.
align	"Center"	"Start" | "Center" | "End"	가장자리 기준 정렬.
delayMs	700	number	표시 전 지연(밀리초).
open	—	boolean	제어형 열림 상태.
defaultOpen	—	boolean	비제어형 초기 열림 상태.
onOpenChange	—	(open: boolean) => void	열림 상태 변경 시 이벤트 핸들러.