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.

Basic Tooltip

View 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).

Tooltip Variants

View 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.

Tooltip with Arrow

View 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.

Tooltip Sides

View 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

Tooltip (Root)

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

Related Components

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