Tooltip

호버 시 추가 정보를 표시하는 팝업 컴포넌트입니다. Radix UI 기반으로 접근성을 지원합니다.

Installation

bash

npx axis-cli add tooltip

Usage

tsx

import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from '@axis-ds/ui-react'

export function Example() {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger asChild>
          <Button variant="outline">Hover me</Button>
        </TooltipTrigger>
        <TooltipContent>
          <p>Tooltip content</p>
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  )
}

Interactive Demo

Positions

tsx

<Tooltip>
  <TooltipTrigger>Top</TooltipTrigger>
  <TooltipContent side="top">Top tooltip</TooltipContent>
</Tooltip>

<Tooltip>
  <TooltipTrigger>Right</TooltipTrigger>
  <TooltipContent side="right">Right tooltip</TooltipContent>
</Tooltip>

<Tooltip>
  <TooltipTrigger>Bottom</TooltipTrigger>
  <TooltipContent side="bottom">Bottom tooltip</TooltipContent>
</Tooltip>

<Tooltip>
  <TooltipTrigger>Left</TooltipTrigger>
  <TooltipContent side="left">Left tooltip</TooltipContent>
</Tooltip>

TooltipContent Props

Prop	Type	Default	Description
`side`	`"top" \| "right" \| "bottom" \| "left"`	"top"	툴팁 표시 위치
`sideOffset`	`number`	4	트리거로부터의 거리 (px)
`className`	`string`	-	추가 CSS 클래스

side

Type:"top" | "right" | "bottom" | "left"

Default:"top"

툴팁 표시 위치

sideOffset

Type:number

Default:4

트리거로부터의 거리 (px)

className

Type:string

Default:-

추가 CSS 클래스

Accessibility

Radix UI Tooltip 기반으로 role="tooltip"을 제공합니다.

Key	Action
`Esc`	표시된 툴팁을 닫습니다.

트리거에 포커스하거나 호버하면 툴팁이 나타납니다 (툴팁 자체는 포커스 불가).
툴팁은 보조 정보 전용이며 필수 정보를 담지 마세요.