Tooltip

Tooltips display descriptive content when users hover over or focus on one child control. Focus opens immediately; delay applies to hover. Escape dismisses the content.

Import


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

Usage

Basic

Preview


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

Placement

Preview


<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

Preview


<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

Standalone panels and actions

Existing uses without a child remain visible panels. position is retained as a legacy placement option. For new trigger-based uses, prefer placement.

An onClose, primaryAction, or secondaryAction makes the content an interactive popover with dialog semantics. With a child trigger, it opens on click, moves focus into the panel, and returns focus on Escape. Use this for actions; reserve ordinary tooltips for descriptions.

Accessibility

Tooltip content is announced by screen readers
Supports both hover and focus triggers
Dismissible with Escape key
Connects descriptive content to its trigger with aria-describedby. Action panels use dialog semantics.