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
Root of the Tooltip compound component, which shows a short label for an element on hover or focus. Manages the open state. Doesn't render its own HTML element.
| 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
Element that opens the tooltip when hovered or focused. Renders a <button> element.
| 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
Combines Tooltip.PortalPrimitive, Tooltip.PositionerPrimitive, and Tooltip.PopupPrimitive into a single part. Use portalElement or positionerElement to replace the portal or positioner. Renders a <div> element.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
portalElement? | - | ReactElement<TooltipPortalPrimitive.Props> |
positionerElement? | - | ReactElement<TooltipPositionerPrimitive.Props> |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |
Tooltip.PortalPrimitive
Portal container that renders the tooltip outside the normal DOM hierarchy. Renders a <div> element.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
container? | - | HTMLElementShadowRootReact.RefObject<HTMLElement | ShadowRoot | null>null |
keepMounted? | false | boolean |
render? | - | ReactElementfunction |
Tooltip.PositionerPrimitive
Positions the tooltip popup against its trigger and keeps it inside the viewport. Renders a <div> element.
| 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
The tooltip panel, with an arrow that points at the trigger. Renders a <div> element.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |