Component

Tooltip

A hover-triggered tooltip with configurable delay, placement, and portal rendering. Uses the headless @refraction-ui/tooltip core.

Examples

Hover over the buttons to see tooltips with different delay durations.

Installation

$pnpm add @refraction-ui/react-tooltip

Usage

tsx

import { Tooltip, TooltipTrigger, TooltipContent } from '@refraction-ui/react-tooltip'

export function MyComponent() {
  return (
    <Tooltip>
      <TooltipTrigger>
        <button>Hover me</button>
      </TooltipTrigger>
      <TooltipContent>Helpful tooltip text</TooltipContent>
    </Tooltip>
  )
}

Props

Prop	Type	Default	Description
`open`	`boolean`	--	Controlled open state.
`defaultOpen`	`boolean`	`false`	Initial open state.
`onOpenChange`	`(open: boolean) => void`	--	Callback on open change.
`placement`	`'top' \| 'bottom' \| 'left' \| 'right'`	--	Tooltip placement.
`delayDuration`	`number`	`300`	Delay in ms before showing.
`children`	`ReactNode`	--	TooltipTrigger + TooltipContent.