Tooltip

A popup that displays information related to an element when it receives keyboard focus or the mouse hovers over it.

Usage

import { Tooltip } from "@raystack/apsara/v1";
 
<Tooltip message="This is a tooltip">
  <Button>Hover me</Button>
</Tooltip>;

Prop	Type	Default
`message`	`ReactNode`	-
`children`	`ReactNode`	-
`side`	`"top" \| "right" \| "bottom" \| "left" \| "top-left" \| "top-right" \| "bottom-left" \| "bottom-right"`	`"top"`
`disabled`	`boolean`	`false`
`delayDuration`	`number`	`200`
`skipDelayDuration`	`number`	`200`
`className`	`string`	-

Examples

Side

The Tooltip component can be positioned in different directions using the side prop:

<Flex gap="medium" align="center">
  <Tooltip message="Top tooltip" side="top">
    <Button>Top</Button>
  </Tooltip>
  <Tooltip message="Right tooltip" side="right">
    <Button>Right</Button>
  </Tooltip>
  <Tooltip message="Bottom tooltip" side="bottom">
    <Button>Bottom</Button>
  </Tooltip>
  <Tooltip message="Left tooltip" side="left">
    <Button>Left</Button>
  </Tooltip>
  <Tooltip message="Top Left tooltip" side="top-left">
    <Button>Top Left</Button>
  </Tooltip>
  <Tooltip message="Top Right tooltip" side="top-right">
    <Button>Top Right</Button>
  </Tooltip>
  <Tooltip message="Bottom Left tooltip" side="bottom-left">
    <Button>Bottom Left</Button>
  </Tooltip>
  <Tooltip message="Bottom Right tooltip" side="bottom-right">
    <Button>Bottom Right</Button>
  </Tooltip>
</Flex>

Custom Content

Tooltips can contain custom content using ReactNode:

<Tooltip
  message={
    <div>
      <span style={{ fontWeight: "medium" }}>Custom Tooltip</span>
    </div>
  }
>
  <Button>Hover me</Button>
</Tooltip>

Accessibility

The Tooltip component follows WAI-ARIA guidelines for tooltips:

Uses role="tooltip" for proper semantic meaning
Automatically manages focus and hover interactions
Supports keyboard navigation
Provides appropriate ARIA attributes for accessibility
Manages enter/exit animations for smooth user experience