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

Install the component from your command line.

npm install @raystack/apsara

Import and usage.

import { Tooltip } from '@raystack/apsara/v1'

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

The Tooltip component accepts the following props:

message: Content to display in the tooltip (string | ReactNode)
children: Element that triggers the tooltip (ReactNode)
side: Position of the tooltip ("top" | "right" | "bottom" | "left" | "top-left" | "top-right" | "bottom-left" | "bottom-right", default: "top")
disabled: Whether the tooltip is disabled (boolean, default: false)
delayDuration: Delay before showing the tooltip (number, default: 200)
skipDelayDuration: Delay before showing the tooltip when moving between tooltips (number, default: 200)
className: Additional CSS class names

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

Tooltips can also be positioned at corners:

Tooltips can contain custom content using ReactNode:

The Tooltip component follows WAI-ARIA guidelines for tooltips: