Tooltip

The Tooltip component displays additional information when users hover or focus on an element. Built on Radix UI Tooltip, it handles positioning, delay, keyboard interactions, and screen reader announcements automatically.

Import

import {
  TooltipProvider,
  Tooltip,
  TooltipTrigger,
  TooltipContent,
  TooltipArrow,
} from '@nim-ui/components';

Basic Usage

Wrap your app (or a section) with TooltipProvider, then use Tooltip, TooltipTrigger, and TooltipContent.

Code

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger asChild>
      <Button variant="outline">Hover me</Button>
    </TooltipTrigger>
    <TooltipContent>
      This is a tooltip
    </TooltipContent>
  </Tooltip>
</TooltipProvider>

Variants

Two visual styles: default (dark background) and light (light background with border).

Code

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger asChild>
      <Button variant="outline">Default</Button>
    </TooltipTrigger>
    <TooltipContent variant="default">
      Default dark tooltip
    </TooltipContent>
  </Tooltip>

  <Tooltip>
    <TooltipTrigger asChild>
      <Button variant="outline">Light</Button>
    </TooltipTrigger>
    <TooltipContent variant="light">
      Light tooltip with border
    </TooltipContent>
  </Tooltip>
</TooltipProvider>

Arrow

Use showArrow to display an arrow pointing to the trigger. The arrow color matches the variant automatically.

Code

<TooltipContent showArrow>
  Tooltip with arrow
</TooltipContent>

<TooltipContent variant="light" showArrow>
  Light tooltip with arrow
</TooltipContent>

Positioning

Control tooltip placement with the side prop. Radix automatically flips to the opposite side when there isn't enough space.

Code

<TooltipContent side="top" showArrow>Top</TooltipContent>
<TooltipContent side="bottom" showArrow>Bottom</TooltipContent>
<TooltipContent side="left" showArrow>Left</TooltipContent>
<TooltipContent side="right" showArrow>Right</TooltipContent>

Delay Configuration

Control how quickly tooltips appear via TooltipProvider or per-tooltip delayDuration.

{/* Global: 500ms delay */}
<TooltipProvider delayDuration={500}>
  <Tooltip>...</Tooltip>
</TooltipProvider>

{/* Per-tooltip: instant */}
<TooltipProvider>
  <Tooltip delayDuration={0}>
    <TooltipTrigger>Instant tooltip</TooltipTrigger>
    <TooltipContent>Shows immediately</TooltipContent>
  </Tooltip>
</TooltipProvider>

Controlled Mode

Control the tooltip open state externally using React state.

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

  return (
    <TooltipProvider>
      <Tooltip open={open} onOpenChange={setOpen}>
        <TooltipTrigger asChild>
          <Button>Controlled</Button>
        </TooltipTrigger>
        <TooltipContent>
          Controlled tooltip
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
}

Component Architecture

Component	Description
`TooltipProvider`	Context provider for global delay settings. Place at app root.
`Tooltip`	Root component managing open/close state (Radix Tooltip.Root)
`TooltipTrigger`	Element that shows tooltip on hover/focus (Radix Tooltip.Trigger)
`TooltipContent`	Tooltip panel with variant styling, rendered via Portal
`TooltipArrow`	Arrow indicator matching the content variant color

Props

TooltipProvider

Name	Type	Default	Description
`delayDuration`	`number`	`300`	Delay in ms before the tooltip opens
`skipDelayDuration`	`number`	`300`	Delay for the next tooltip when one was recently visible
`disableHoverableContent`	`boolean`	`false`	When true, hovering the tooltip content will not keep it open

Name	Type	Default	Description
`open`	`boolean`	-	Controlled open state
`defaultOpen`	`boolean`	`false`	Initial open state for uncontrolled usage
`onOpenChange`	`(open: boolean) => void`	-	Callback when the open state changes
`delayDuration`	`number`	-	Override the delay from the Provider for this tooltip

TooltipContent

Name	Type	Default	Description
`variant`	`'default' \| 'light'`	`'default'`	Visual style variant
`side`	`'top' \| 'bottom' \| 'left' \| 'right'`	`'top'`	Preferred side to display the tooltip
`sideOffset`	`number`	`4`	Distance in px between the tooltip and the trigger
`showArrow`	`boolean`	`false`	Show an arrow pointing to the trigger element
`className`	`string`	-	Additional CSS classes

Accessibility

Built on Radix UI Tooltip with full accessibility support:

role="tooltip": Content is announced as a tooltip to screen readers
aria-describedby: Trigger is automatically linked to the tooltip content
Keyboard focus: Tooltip shows when trigger receives keyboard focus
Escape key: Pressing Escape dismisses the tooltip immediately
Portal rendering: Content renders outside the DOM hierarchy without affecting the accessibility tree

Keyboard Support

Key	Action
Tab	Focus trigger to show tooltip
Escape	Dismiss the tooltip

Modal — Dialog overlay for focused interactions
Toast — Temporary notification messages

Import

Basic Usage

Variants

Arrow

Positioning

Delay Configuration

Controlled Mode

Component Architecture

Props

TooltipProvider

Tooltip (Root)

TooltipContent

Accessibility

Keyboard Support

On this page