Tooltip

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

Usage

1import { Tooltip } from "@raystack/apsara";

Tooltip Props

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

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

Examples

Side

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

1<Flex gap="medium" align="center">
2  <Tooltip message="Top tooltip" side="top">
3    <Button>Top</Button>
4  </Tooltip>
5  <Tooltip message="Right tooltip" side="right">
6    <Button>Right</Button>
7  </Tooltip>
8  <Tooltip message="Bottom tooltip" side="bottom">
9    <Button>Bottom</Button>
10  </Tooltip>
11  <Tooltip message="Left tooltip" side="left">
12    <Button>Left</Button>
13  </Tooltip>
14  <Tooltip message="Top Left tooltip" side="top-left">
15    <Button>Top Left</Button>
16  </Tooltip>
17  <Tooltip message="Top Right tooltip" side="top-right">
18    <Button>Top Right</Button>
19  </Tooltip>
20  <Tooltip message="Bottom Left tooltip" side="bottom-left">
21    <Button>Bottom Left</Button>
22  </Tooltip>
23  <Tooltip message="Bottom Right tooltip" side="bottom-right">
24    <Button>Bottom Right</Button>
25  </Tooltip>
26</Flex>

Custom Content

Tooltips can contain custom content using ReactNode:

1<Tooltip
2  message={
3    <div>
4      <span style={{ fontWeight: "medium" }}>Custom Tooltip</span>
5    </div>
6  }
7>
8  <Button>Hover me</Button>
9</Tooltip>

With Provider

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

1<Flex gap="medium" align="center">
2  <Tooltip.Provider>
3    <Tooltip message="Top Left tooltip" side="top-left">
4      <Button>Top Left</Button>
5    </Tooltip>
6    <Tooltip message="Top Right tooltip" side="top-right">
7      <Button>Top Right</Button>
8    </Tooltip>
9    <Tooltip message="Bottom Left tooltip" side="bottom-left">
10      <Button>Bottom Left</Button>
11    </Tooltip>
12    <Tooltip message="Bottom Right tooltip" side="bottom-left">
13      <Button>Bottom Right</Button>
14    </Tooltip>
15  </Tooltip.Provider>
16</Flex>

Follow Cursor

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

1<Tooltip message="Tooltip message" followCursor>
2  <Button>Hover me</Button>
3</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