Tooltip

Tooltips display informative text when users hover over or focus on an element.

Import


import { Tooltip } from "@raydenui/ui";

Usage

Basic


<Tooltip content="This is a tooltip">
  <Button>Hover me</Button>
</Tooltip>

Placement


<Tooltip content="Top" placement="top">
  <Button>Top</Button>
</Tooltip>
 
<Tooltip content="Right" placement="right">
  <Button>Right</Button>
</Tooltip>
 
<Tooltip content="Bottom" placement="bottom">
  <Button>Bottom</Button>
</Tooltip>
 
<Tooltip content="Left" placement="left">
  <Button>Left</Button>
</Tooltip>

With Rich Content


<Tooltip
  content={
    <div className="space-y-1">
      <p className="font-medium">Keyboard Shortcut</p>
      <p className="text-grey-400">Press Cmd+K to open search</p>
    </div>
  }
>
  <Button>Search</Button>
</Tooltip>

Delay


<Tooltip content="Delayed tooltip" delay={500}>
  <Button>Hover (500ms delay)</Button>
</Tooltip>

Controlled


const [open, setOpen] = useState(false);
 
<Tooltip
  content="Controlled tooltip"
  open={open}
  onOpenChange={setOpen}
>
  <Button onClick={() => setOpen(!open)}>
    Click to toggle
  </Button>
</Tooltip>

Props

Prop	Type	Default	Description
`content`	`ReactNode`	—	Tooltip content (required)
`placement`	`"top" \| "right" \| "bottom" \| "left"`	`"top"`	Tooltip placement
`delay`	`number`	`0`	Delay before showing (ms)
`open`	`boolean`	—	Controlled open state
`onOpenChange`	`(open: boolean) => void`	—	Open state handler
`className`	`string`	—	Additional CSS classes

Accessibility

Tooltip content is announced by screen readers
Supports both hover and focus triggers
Dismissible with Escape key
Uses proper ARIA attributes