NxtGenNxtGenDesign v0/Components
Feedback

Tooltip

hover/focus 시 표시되는 짧은 보조 정보.

IconButton의 의미 보강, 키보드 단축키 안내 등. 본문 안 핵심 정보 전달용은 아님. 여러 곳에 쓰면 외부에 TooltipProvider로 감쌀 것 (delay 공유).

import { Tooltip, TooltipProvider } from "@nxtgen-org/react";

Sides

top / bottom / left / right

tsx
<Tooltip content="새 채팅 시작" side="top">
  <IconButton aria-label="새 채팅" icon={<Bot size={18} />} />
</Tooltip>

Rich content

ReactNode 렌더

tsx
<Tooltip
  content={<><kbd>⌘</kbd> + <kbd>K</kbd> 로 빠르게 열기</>}
>
  <Button variant="secondary" size="sm">키보드 단축키</Button>
</Tooltip>

API

NameTypeDefaultDescription
content*ReactNode——
children*ReactNode—trigger element.
side"top" | "right" | "bottom" | "left""top"—
align"start" | "center" | "end""center"—
delayDurationnumber300—
withProviderbooleantrue외부 Provider 있으면 false.