Skip to main content

​
Import

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

​
Usage

<Tooltip>
  <Tooltip.Trigger render={<button>Hover me</button>} />
  <Tooltip.Content>Helpful information</Tooltip.Content>
</Tooltip>

​
With arrow

<Tooltip>
  <Tooltip.Trigger render={<button>Hover me</button>} />
  <Tooltip.Content showArrow>This tooltip has an arrow</Tooltip.Content>
</Tooltip>

​
Positioning

<Tooltip>
  <Tooltip.Trigger render={<button>Hover me</button>} />
  <Tooltip.Content side="bottom" align="start">
    Positioned at bottom-start
  </Tooltip.Content>
</Tooltip>

​
Multiple tooltips with provider

<Tooltip.Provider delay={500}>
  <Tooltip>
    <Tooltip.Trigger render={<button>First</button>} />
    <Tooltip.Content>First tooltip</Tooltip.Content>
  </Tooltip>
  
  <Tooltip>
    <Tooltip.Trigger render={<button>Second</button>} />
    <Tooltip.Content>Second tooltip</Tooltip.Content>
  </Tooltip>
</Tooltip.Provider>

​
Custom delay

<Tooltip delay={1000}>
  <Tooltip.Trigger render={<button>Slow to appear</button>} />
  <Tooltip.Content>This tooltip has a 1 second delay</Tooltip.Content>
</Tooltip>

​
Controlled tooltip

const [open, setOpen] = useState(false);

<Tooltip open={open} onOpenChange={setOpen}>
  <Tooltip.Trigger render={<button>Controlled</button>} />
  <Tooltip.Content>Controlled tooltip content</Tooltip.Content>
</Tooltip>

​
API reference

​
Tooltip

The root component that manages tooltip state.
​
open
boolean
Controls the open state of the tooltip.
​
defaultOpen
boolean
The initial open state in uncontrolled mode.
​
onOpenChange
(open: boolean) => void
Callback fired when the open state changes.
​
delay
number
default:"200"
The delay in milliseconds before the tooltip appears.

​
Tooltip.Trigger

The trigger element that activates the tooltip on hover or focus.
​
render
React.ReactElement
required
The element that triggers the tooltip. Must be a renderable element.
​
delay
number
default:"200"
Override the delay for this specific trigger.

​
Tooltip.Content

The content displayed inside the tooltip popup.
​
showArrow
boolean
default:"false"
Controls whether to show the arrow pointing to the trigger.
​
side
'top' | 'right' | 'bottom' | 'left'
default:"'top'"
The preferred side of the trigger to render against.
​
align
'start' | 'center' | 'end'
default:"'center'"
The alignment of the tooltip relative to the trigger.
​
sideOffset
number
The distance in pixels from the trigger. Defaults to 4 when showArrow is false, or 10 when showArrow is true.
​
className
string
Additional CSS class names to apply to the tooltip content.
​
style
CSSProperties
Inline styles to apply to the tooltip content.

​
Tooltip.Provider

Provides shared configuration for multiple tooltips.
​
delay
number
default:"200"
The delay in milliseconds before tooltips appear for all tooltips within the provider.
​
children
React.ReactNode
required
The tooltip components to be wrapped by the provider.