Tooltip

'use client';

import { Button, Tooltip } from '@vapor-ui/core';

export default function DefaultTooltip() {
    return (
        <Tooltip.Root>
            <Tooltip.Trigger render={<Button>툴팁 보기</Button>} />
            <Tooltip.Portal>
                <Tooltip.Content>유용한 정보를 제공하는 툴팁입니다.</Tooltip.Content>
            </Tooltip.Portal>
        </Tooltip.Root>
    );
}

Property

Positioning

Tooltip의 표시 위치를 설정할 수 있습니다.

import { Button, Tooltip } from '@vapor-ui/core';

export default function TooltipPositioning() {
    return (
        <div className="flex flex-wrap gap-4">
            <Tooltip.Root>
                <Tooltip.Trigger render={<Button>상단</Button>} />
                <Tooltip.Portal>
                    <Tooltip.Positioner side="top">
                        <Tooltip.Popup>상단에 표시되는 툴팁</Tooltip.Popup>
                    </Tooltip.Positioner>
                </Tooltip.Portal>
            </Tooltip.Root>

            <Tooltip.Root>
                <Tooltip.Trigger render={<Button>우측</Button>} />
                <Tooltip.Portal>
                    <Tooltip.Positioner side="right">
                        <Tooltip.Popup>우측에 표시되는 툴팁</Tooltip.Popup>
                    </Tooltip.Positioner>
                </Tooltip.Portal>
            </Tooltip.Root>

            <Tooltip.Root>
                <Tooltip.Trigger render={<Button>하단</Button>} />
                <Tooltip.Portal>
                    <Tooltip.Positioner side="bottom">
                        <Tooltip.Popup>하단에 표시되는 툴팁</Tooltip.Popup>
                    </Tooltip.Positioner>
                </Tooltip.Portal>
            </Tooltip.Root>

            <Tooltip.Root>
                <Tooltip.Trigger render={<Button>좌측</Button>} />
                <Tooltip.Portal>
                    <Tooltip.Positioner side="left">
                        <Tooltip.Popup>좌측에 표시되는 툴팁</Tooltip.Popup>
                    </Tooltip.Positioner>
                </Tooltip.Portal>
            </Tooltip.Root>
        </div>
    );
}

Alignment

Tooltip의 정렬 위치를 조정할 수 있습니다.

하단 정렬

우측 정렬

import { Button, Tooltip } from '@vapor-ui/core';

export default function TooltipAlignment() {
    return (
        <div className="space-y-8">
            <div>
                <h4 className="text-sm font-medium mb-4">하단 정렬</h4>
                <div className="flex gap-4">
                    <Tooltip.Root>
                        <Tooltip.Trigger render={<Button>시작</Button>} />
                        <Tooltip.Portal>
                            <Tooltip.Positioner side="bottom" align="start">
                                <Tooltip.Popup>시작 위치에 정렬된 툴팁</Tooltip.Popup>
                            </Tooltip.Positioner>
                        </Tooltip.Portal>
                    </Tooltip.Root>

                    <Tooltip.Root>
                        <Tooltip.Trigger render={<Button>중앙</Button>} />
                        <Tooltip.Portal>
                            <Tooltip.Positioner side="bottom" align="center">
                                <Tooltip.Popup>중앙에 정렬된 툴팁</Tooltip.Popup>
                            </Tooltip.Positioner>
                        </Tooltip.Portal>
                    </Tooltip.Root>

                    <Tooltip.Root>
                        <Tooltip.Trigger render={<Button>끝</Button>} />
                        <Tooltip.Portal>
                            <Tooltip.Positioner side="bottom" align="end">
                                <Tooltip.Popup>끝 위치에 정렬된 툴팁</Tooltip.Popup>
                            </Tooltip.Positioner>
                        </Tooltip.Portal>
                    </Tooltip.Root>
                </div>
            </div>

            <div>
                <h4 className="text-sm font-medium mb-4">우측 정렬</h4>
                <div className="flex flex-col gap-4">
                    <Tooltip.Root>
                        <Tooltip.Trigger render={<Button>시작</Button>} />
                        <Tooltip.Portal>
                            <Tooltip.Positioner side="right" align="start">
                                <Tooltip.Popup>상단 시작 위치</Tooltip.Popup>
                            </Tooltip.Positioner>
                        </Tooltip.Portal>
                    </Tooltip.Root>

                    <Tooltip.Root>
                        <Tooltip.Trigger render={<Button>중앙</Button>} />
                        <Tooltip.Portal>
                            <Tooltip.Positioner side="right" align="center">
                                <Tooltip.Popup>중앙 위치</Tooltip.Popup>
                            </Tooltip.Positioner>
                        </Tooltip.Portal>
                    </Tooltip.Root>

                    <Tooltip.Root>
                        <Tooltip.Trigger render={<Button>끝</Button>} />
                        <Tooltip.Portal>
                            <Tooltip.Positioner side="right" align="end">
                                <Tooltip.Popup>하단 끝 위치</Tooltip.Popup>
                            </Tooltip.Positioner>
                        </Tooltip.Portal>
                    </Tooltip.Root>
                </div>
            </div>
        </div>
    );
}

Delay

Tooltip이 표시되는 지연 시간을 조정할 수 있습니다.

import { Button, Tooltip } from '@vapor-ui/core';

export default function TooltipDelay() {
    return (
        <div className="flex gap-4">
            <Tooltip.Root delay={0}>
                <Tooltip.Trigger render={<Button>즉시 표시</Button>} />
                <Tooltip.Content>지연 없이 바로 표시되는 툴팁</Tooltip.Content>
            </Tooltip.Root>

            <Tooltip.Root delay={500}>
                <Tooltip.Trigger render={<Button>0.5초 지연</Button>} />
                <Tooltip.Content>0.5초 후에 표시되는 툴팁</Tooltip.Content>
            </Tooltip.Root>

            <Tooltip.Root delay={1000}>
                <Tooltip.Trigger render={<Button>1초 지연</Button>} />
                <Tooltip.Content>1초 후에 표시되는 툴팁</Tooltip.Content>
            </Tooltip.Root>

            <Tooltip.Root delay={2000}>
                <Tooltip.Trigger render={<Button>2초 지연</Button>} />
                <Tooltip.Content>2초 후에 표시되는 툴팁</Tooltip.Content>
            </Tooltip.Root>
        </div>
    );
}

Offset

Tooltip의 거리와 정렬 오프셋을 조정할 수 있습니다.

Side Offset (거리 조정)

Align Offset (정렬 오프셋)

import { Button, Tooltip } from '@vapor-ui/core';

export default function TooltipOffset() {
    return (
        <div className="space-y-8">
            <div>
                <h4 className="text-sm font-medium mb-4">Side Offset (거리 조정)</h4>
                <div className="flex gap-4">
                    <Tooltip.Root>
                        <Tooltip.Trigger render={<Button>0px</Button>} />
                        <Tooltip.Portal>
                            <Tooltip.Positioner sideOffset={0}>
                                <Tooltip.Popup>거리 0px</Tooltip.Popup>
                            </Tooltip.Positioner>
                        </Tooltip.Portal>
                    </Tooltip.Root>

                    <Tooltip.Root>
                        <Tooltip.Trigger render={<Button>10px</Button>} />
                        <Tooltip.Portal>
                            <Tooltip.Positioner sideOffset={10}>
                                <Tooltip.Popup>거리 10px</Tooltip.Popup>
                            </Tooltip.Positioner>
                        </Tooltip.Portal>
                    </Tooltip.Root>

                    <Tooltip.Root>
                        <Tooltip.Trigger render={<Button>20px</Button>} />
                        <Tooltip.Portal>
                            <Tooltip.Positioner sideOffset={20}>
                                <Tooltip.Popup>거리 20px</Tooltip.Popup>
                            </Tooltip.Positioner>
                        </Tooltip.Portal>
                    </Tooltip.Root>
                </div>
            </div>

            <div>
                <h4 className="text-sm font-medium mb-4">Align Offset (정렬 오프셋)</h4>
                <div className="flex gap-4">
                    <Tooltip.Root>
                        <Tooltip.Trigger render={<Button>-20px</Button>} />
                        <Tooltip.Portal>
                            <Tooltip.Positioner alignOffset={-20}>
                                <Tooltip.Popup>정렬 오프셋 -20px</Tooltip.Popup>
                            </Tooltip.Positioner>
                        </Tooltip.Portal>
                    </Tooltip.Root>

                    <Tooltip.Root>
                        <Tooltip.Trigger render={<Button>0px</Button>} />
                        <Tooltip.Portal>
                            <Tooltip.Positioner alignOffset={0}>
                                <Tooltip.Popup>정렬 오프셋 0px</Tooltip.Popup>
                            </Tooltip.Positioner>
                        </Tooltip.Portal>
                    </Tooltip.Root>

                    <Tooltip.Root>
                        <Tooltip.Trigger render={<Button>+20px</Button>} />
                        <Tooltip.Portal>
                            <Tooltip.Positioner alignOffset={20}>
                                <Tooltip.Popup>정렬 오프셋 +20px</Tooltip.Popup>
                            </Tooltip.Positioner>
                        </Tooltip.Portal>
                    </Tooltip.Root>
                </div>
            </div>
        </div>
    );
}

Examples

Content Variations

다양한 형태의 툴팁 내용을 표시할 수 있습니다.

'use client';

import { Button, Tooltip } from '@vapor-ui/core';

export default function TooltipContent() {
    return (
        <div className="flex flex-wrap gap-4">
            <Tooltip.Root>
                <Tooltip.Trigger render={<Button>간단한 텍스트</Button>} />
                <Tooltip.Content>간단한 툴팁 메시지</Tooltip.Content>
            </Tooltip.Root>

            <Tooltip.Root>
                <Tooltip.Trigger render={<Button>긴 텍스트</Button>} />
                <Tooltip.Content>
                    이것은 더 긴 툴팁 메시지입니다. 여러 줄에 걸쳐 표시될 수 있으며 유용한 정보를
                    제공합니다.
                </Tooltip.Content>
            </Tooltip.Root>

            <Tooltip.Root>
                <Tooltip.Trigger render={<Button>포맷된 텍스트</Button>} />
                <Tooltip.Content>
                    <div className="space-y-1">
                        <div className="font-bold">제목</div>
                        <div className="text-sm">설명 텍스트가 여기에 있습니다.</div>
                        <div className="text-xs text-gray-600">추가 정보</div>
                    </div>
                </Tooltip.Content>
            </Tooltip.Root>

            <Tooltip.Root>
                <Tooltip.Trigger render={<Button>키보드 단축키</Button>} />
                <Tooltip.Content>
                    <div className="flex items-center gap-2">
                        <span>저장하기</span>
                        <kbd className="px-1.5 py-0.5 text-xs bg-gray-200 rounded">Ctrl+S</kbd>
                    </div>
                </Tooltip.Content>
            </Tooltip.Root>
        </div>
    );
}

Props Table

Tooltip.Root

Tooltip의 루트 컨테이너 컴포넌트입니다. 위치 관련 props와 Base UI Tooltip.Root의 모든 props를 지원합니다.

Prop	Default	Type
openOnClick?	false	boolean
openOnHover?	true	boolean
openOnFocus?	true	boolean
delay?	0	number
closeDelay?	0	number
open?	-	boolean
defaultOpen?	false	boolean
onOpenChange?	-	function
disabled?	false	boolean
side?	top	toprightbottomleft
align?	center	startcenterend
sideOffset?	6	number
alignOffset?	0	number
anchor?	null	ElementVirtualElementnull
arrowPadding?	4	number
collisionAvoidance?	{ align: 'none' }	booleanobject
collisionBoundary?	clippingAncestors	ElementArray<Element>string
collisionPadding?	0	numberobject
positionMethod?	absolute	absolutefixed
sticky?	partial	partialalways
trackAnchor?	true	boolean

Tooltip.Trigger

Tooltip을 트리거하는 컴포넌트입니다.

Prop	Default	Type
render?	-	ReactElementfunction

Tooltip.Portal

Tooltip 콘텐츠를 DOM 트리의 다른 위치로 렌더링하는 컴포넌트입니다.

Prop	Default	Type
container?	document.body	Elementfunction
keepMounted?	false	boolean

Tooltip.Content

Tooltip의 실제 콘텐츠를 포함하는 컴포넌트입니다. 내장된 Positioner, Popup, Arrow를 포함하며, 자동으로 화살표가 포함되어 위치에 따라 화살표 방향이 조정됩니다.

Prop	Default	Type
className?	-	string
children?	-	ReactNode
style?	-	CSSProperties
onPointerEnter?	-	function
onPointerLeave?	-	function
onEscapeKeyDown?	-	function
onInteractOutside?	-	function

하단 정렬

우측 정렬

Side Offset (거리 조정)

Align Offset (정렬 오프셋)

On this page

하단 정렬

우측 정렬

Side Offset (거리 조정)

Align Offset (정렬 오프셋)