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.Trigger Props

The Trigger component wraps the element that activates the tooltip.

Prop

Type

Tooltip.Content Props

The Content component displays the tooltip content and controls positioning.

Prop

Type

Tooltip.Provider Props

The Provider 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 Content component can be positioned in different directions using the side prop:

1<Flex gap="medium" align="center">
2  <Tooltip>
3    <Tooltip.Trigger render={<Button />}>Top</Tooltip.Trigger>
4    <Tooltip.Content side="top">Top tooltip</Tooltip.Content>
5  </Tooltip>
6  <Tooltip>
7    <Tooltip.Trigger render={<Button />}>Right</Tooltip.Trigger>
8    <Tooltip.Content side="right">Right tooltip</Tooltip.Content>
9  </Tooltip>
10  <Tooltip>
11    <Tooltip.Trigger render={<Button />}>Bottom</Tooltip.Trigger>
12    <Tooltip.Content side="bottom">Bottom tooltip</Tooltip.Content>
13  </Tooltip>
14  <Tooltip>
15    <Tooltip.Trigger render={<Button />}>Left</Tooltip.Trigger>

Align

The Tooltip Content component can be aligned in different directions using the align prop:

1<Flex gap="large" align="center">
2  <Tooltip>
3    <Tooltip.Trigger render={<Button />}>Start</Tooltip.Trigger>
4    <Tooltip.Content align="start">Start tooltip</Tooltip.Content>
5  </Tooltip>
6  <Tooltip>
7    <Tooltip.Trigger render={<Button />}>Center</Tooltip.Trigger>
8    <Tooltip.Content align="center">Center tooltip</Tooltip.Content>
9  </Tooltip>
10  <Tooltip>
11    <Tooltip.Trigger render={<Button />}>End</Tooltip.Trigger>
12    <Tooltip.Content align="end">End tooltip</Tooltip.Content>
13  </Tooltip>
14</Flex>

Custom Content

Tooltips can contain custom content using ReactNode:

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

With Provider

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

1<Tooltip.Provider>
2  <Flex gap="medium" align="center">
3    <Tooltip>
4      <Tooltip.Trigger render={<Button />}>Tooltip 1</Tooltip.Trigger>
5      <Tooltip.Content>Top Left tooltip</Tooltip.Content>
6    </Tooltip>
7    <Tooltip>
8      <Tooltip.Trigger render={<Button />}>Tooltip 2</Tooltip.Trigger>
9      <Tooltip.Content>Top Right tooltip</Tooltip.Content>
10    </Tooltip>
11  </Flex>
12</Tooltip.Provider>

Track Cursor

Use trackCursorAxis prop on the Root component to make the tooltip follow the cursor:

1<Tooltip trackCursorAxis="both">
2  <Tooltip.Trigger render={<Button />}>Hover me</Tooltip.Trigger>
3  <Tooltip.Content>Tooltip follows cursor</Tooltip.Content>
4</Tooltip>

With Arrow

Show the arrow by setting showArrow={true} on the Content component:

1<Tooltip>
2  <Tooltip.Trigger render={<Button />}>Hover me</Tooltip.Trigger>
3  <Tooltip.Content showArrow>Tooltip with arrow</Tooltip.Content>
4</Tooltip>