Tooltip
요소에 대한 추가 정보를 제공하는 툴팁 컴포넌트입니다-
반드시 Button, IconButton 등과 같은 상호작용이 가능한 요소와 함께 사용하세요. Tooltip은 상호작용 가능한 요소의 동작에 대한 추가 정보를 제공하는 작은 팝업입니다. 상호작용이 불가능한 요소에 사용하거나, 단순히 정보를 제공하기 위한 용도로 사용하려면
Popover컴포넌트를 고려해보세요. -
Tooltip에 중요한 정보를 포함하지 마세요. Tooltip은 보조적인 정보를 제공하기 위한 용도로 설계되었으며, 중요한 정보는 포함하지 않는 것이 좋습니다. 중요한 정보는 항상 페이지의 주요 콘텐츠에 포함시켜야 합니다.
Property
Positioning
Tooltip의 표시 위치를 설정합니다.
Alignment
Tooltip의 정렬 위치를 설정합니다.
Delay
Tooltip.Trigger의 delay prop으로 Tooltip이 표시되기까지의 지연 시간을 설정합니다.
Offset
Tooltip의 거리와 정렬 오프셋을 조정할 수 있습니다.
Examples
Content Variations
다양한 형태의 툴팁 내용을 표시할 수 있습니다.
Props Table
Tooltip.Root
요소에 마우스를 올리거나 포커스하면 짧은 레이블을 보여 주는 Tooltip 복합 컴포넌트의 루트. 열림 상태를 관리합니다. 자체 HTML 요소를 렌더링하지 않습니다.
| Prop | Default | Type |
|---|---|---|
defaultOpen? | false | boolean |
onOpenChange? | - | function |
open? | - | boolean |
actionsRef? | - | React.RefObject<Tooltip.Root.Actions | null> |
children? | - | ReactNodefunction |
defaultTriggerId? | - | stringnull |
disabled? | false | boolean |
disableHoverablePopup? | false | boolean |
handle? | - | TooltipHandle<unknown> |
onOpenChangeComplete? | - | function |
trackCursorAxis? | none | nonebothxy |
triggerId? | - | stringnull |
Tooltip.Trigger
마우스를 올리거나 포커스하면 Tooltip을 여는 요소. <button> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
closeDelay? | 0 | number |
closeOnClick? | true | boolean |
delay? | 600 | number |
disabled? | false | boolean |
handle? | - | TooltipHandle<unknown> |
payload? | - | unknown |
render? | - | ReactElementfunction |
Tooltip.Popup
Tooltip.PortalPrimitive, Tooltip.PositionerPrimitive, Tooltip.PopupPrimitive를 하나의 파트로 합칩니다. 포털이나 포지셔너를 대체하려면 portalElement 또는 positionerElement를 사용하세요. <div> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
portalElement? | - | ReactElement<TooltipPortalPrimitive.Props> |
positionerElement? | - | ReactElement<TooltipPositionerPrimitive.Props> |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |
Tooltip.PortalPrimitive
Tooltip을 일반 DOM 계층 밖에 렌더링하는 포털 컨테이너. <div> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
container? | - | HTMLElementShadowRootReact.RefObject<HTMLElement | ShadowRoot | null>null |
keepMounted? | false | boolean |
render? | - | ReactElementfunction |
Tooltip.PositionerPrimitive
Tooltip 팝업을 트리거 기준으로 배치하고 뷰포트 안에 유지합니다. <div> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
align? | center | centerendstart |
alignOffset? | 0 | numberfunction |
anchor? | - | ElementVirtualElementReact.RefObject<Element | null>functionnull |
arrowPadding? | 5 | number |
collisionAvoidance? | - | CollisionAvoidance |
collisionBoundary? | clipping-ancestors | Boundary |
collisionPadding? | 5 | Padding |
disableAnchorTracking? | false | boolean |
positionMethod? | absolute | fixedabsolute |
side? | top | bottomleftrighttopinline-endinline-start |
sideOffset? | 10 | numberfunction |
sticky? | false | boolean |
render? | - | ReactElementfunction |
Tooltip.PopupPrimitive
트리거를 가리키는 화살표가 있는 Tooltip 패널. <div> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |