Tooltip - Vapor UI

'use client';

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

export default function DefaultTooltip() {
    return (
        <Tooltip.Root>
            <Tooltip.Trigger render={<Button>툴팁 보기</Button>} />
            <Tooltip.Popup>유용한 정보를 제공하는 툴팁입니다.</Tooltip.Popup>
        </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.Popup positionerElement={<Tooltip.PositionerPrimitive side="top" />}>
                    상단에 표시되는 툴팁
                </Tooltip.Popup>
            </Tooltip.Root>

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

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

            <Tooltip.Root>
                <Tooltip.Trigger render={<Button>좌측</Button>} />
                <Tooltip.Popup positionerElement={<Tooltip.PositionerPrimitive side="left" />}>
                    좌측에 표시되는 툴팁
                </Tooltip.Popup>
            </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.Popup
                            positionerElement={
                                <Tooltip.PositionerPrimitive side="bottom" align="start" />
                            }
                        >
                            시작 위치에 정렬된 툴팁
                        </Tooltip.Popup>
                    </Tooltip.Root>

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

                    <Tooltip.Root>
                        <Tooltip.Trigger render={<Button>끝</Button>} />
                        <Tooltip.Popup
                            positionerElement={
                                <Tooltip.PositionerPrimitive side="bottom" align="end" />
                            }
                        >
                            끝 위치에 정렬된 툴팁
                        </Tooltip.Popup>
                    </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.Popup
                            positionerElement={
                                <Tooltip.PositionerPrimitive side="right" align="start" />
                            }
                        >
                            상단 시작 위치
                        </Tooltip.Popup>
                    </Tooltip.Root>

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

                    <Tooltip.Root>
                        <Tooltip.Trigger render={<Button>끝</Button>} />
                        <Tooltip.Popup
                            positionerElement={
                                <Tooltip.PositionerPrimitive side="right" align="end" />
                            }
                        >
                            하단 끝 위치
                        </Tooltip.Popup>
                    </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.Popup>지연 없이 바로 표시되는 툴팁</Tooltip.Popup>
            </Tooltip.Root>

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

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

            <Tooltip.Root delay={2000}>
                <Tooltip.Trigger render={<Button>2초 지연</Button>} />
                <Tooltip.Popup>2초 후에 표시되는 툴팁</Tooltip.Popup>
            </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.Popup
                            positionerElement={<Tooltip.PositionerPrimitive sideOffset={0} />}
                        >
                            거리 0px
                        </Tooltip.Popup>
                    </Tooltip.Root>

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

                    <Tooltip.Root>
                        <Tooltip.Trigger render={<Button>20px</Button>} />
                        <Tooltip.Popup
                            positionerElement={<Tooltip.PositionerPrimitive sideOffset={20} />}
                        >
                            거리 20px
                        </Tooltip.Popup>
                    </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.Popup
                            positionerElement={<Tooltip.PositionerPrimitive alignOffset={-20} />}
                        >
                            정렬 오프셋 -20px
                        </Tooltip.Popup>
                    </Tooltip.Root>

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

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

Examples

Content Variations

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

'use client';

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

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

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

            <Tooltip.Root>
                <Tooltip.Trigger render={<Button>포맷된 텍스트</Button>} />
                <Tooltip.Popup>
                    <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.Popup>
            </Tooltip.Root>

            <Tooltip.Root>
                <Tooltip.Trigger render={<Button>키보드 단축키</Button>} />
                <Tooltip.Popup>
                    <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.Popup>
            </Tooltip.Root>
        </div>
    );
}