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";

The Tooltip component accepts various props to customize its behavior and appearance. You can use it either as a standalone component or nested within a TooltipProvider for enhanced functionality.

Prop	Type	Default
`message`	`ReactNode`	-
`children`	`ReactNode`	-
`side`	`"top" \| "right" \| "bottom" \| "left" \| "top-left" \| "top-right" \| "bottom-left" \| "bottom-right"`	`"top"`
`followCursor`	`boolean`	`false`
`disabled`	`boolean`	`false`
`open`	`boolean`	-
`defaultOpen`	`boolean`	-
`onOpenChange`	`((open: boolean) => void)`	`false`
`delayDuration`	`number`	`200`
`disableHoverableContent`	`boolean`	-
`id`	`string`	-
`className`	`string`	-

Tooltip.Provider Props

The TooltipProvider component serves as a context wrapper that provides global configuration and functionality to all tooltip instances within your application.

Prop	Type	Default
`delayDuration`	`number`	`200`
`skipDelayDuration`	`number`	`200`
`disableHoverableContent`	`boolean`	-

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>

With Provider

The TooltipProvider component can be used to provide a global configuration for all tooltips in your application.

<Flex gap="medium" align="center">
  <Tooltip.Provider>
    <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-left">
      <Button>Bottom Right</Button>
    </Tooltip>
  </Tooltip.Provider>
</Flex>

Follow Cursor

When followCursor is true, the tooltip will follow the cursor and will be positioned relative to the cursor.

<Tooltip message="Tooltip message" followCursor>
  <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