or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

arrow.mdindex.mdportal-content.mdprovider.mdtooltip-root.mdtrigger.mdutilities.md
tile.json

tessl/npm-radix-ui--react-tooltip

A React tooltip component from Radix UI Primitives, part of an open-source UI component library for building high-quality, accessible design systems and web apps

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@radix-ui/react-tooltip@1.2.x

To install, run

npx @tessl/cli install tessl/npm-radix-ui--react-tooltip@1.2.0

index.mddocs/

Radix UI React Tooltip

Radix UI React Tooltip provides a comprehensive, accessible tooltip component system for React applications. It features sophisticated hover behavior, keyboard navigation, portal rendering, and full ARIA compliance through a compound component pattern.

Package Information

  • Package Name: @radix-ui/react-tooltip
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @radix-ui/react-tooltip

Core Imports

import {
  createTooltipScope,
  TooltipProvider,
  Tooltip,
  TooltipTrigger,
  TooltipPortal,
  TooltipContent,
  TooltipArrow,
} from "@radix-ui/react-tooltip";

Alternative short aliases:

import {
  Provider,
  Root,
  Trigger,
  Portal,
  Content,
  Arrow,
} from "@radix-ui/react-tooltip";

For TypeScript types:

import type {
  TooltipProviderProps,
  TooltipProps,
  TooltipTriggerProps,
  TooltipPortalProps,
  TooltipContentProps,
  TooltipArrowProps,
} from "@radix-ui/react-tooltip";

Basic Usage

import {
  TooltipProvider,
  Tooltip,
  TooltipTrigger,
  TooltipPortal,
  TooltipContent,
  TooltipArrow,
} from "@radix-ui/react-tooltip";

function MyComponent() {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger asChild>
          <button>Hover me</button>
        </TooltipTrigger>
        <TooltipPortal>
          <TooltipContent side="top">
            This is a tooltip!
            <TooltipArrow />
          </TooltipContent>
        </TooltipPortal>
      </Tooltip>
    </TooltipProvider>
  );
}

Architecture

Radix UI React Tooltip uses a compound component pattern with hierarchical structure:

  • Provider Layer: TooltipProvider manages global tooltip behavior and timing
  • Tooltip Instance: Tooltip manages individual tooltip state and controls
  • Interaction Layer: TooltipTrigger handles user interactions (hover, focus, keyboard)
  • Portal Layer: TooltipPortal renders content outside normal DOM flow
  • Content Layer: TooltipContent provides the visible tooltip with positioning and accessibility
  • Visual Enhancement: TooltipArrow adds directional pointer to tooltip

Key design patterns:

  • Context-based state management for component communication
  • Portal rendering for z-index and positioning control
  • Sophisticated hover mechanics with grace areas for smooth user experience
  • Controlled/uncontrolled state patterns for flexible integration
  • Accessibility-first design with ARIA compliance and keyboard navigation

Capabilities

Provider Configuration

Global tooltip provider that manages timing, delays, and hover behavior across all tooltips in your application.

interface TooltipProviderProps {
  children: React.ReactNode;
  delayDuration?: number;
  skipDelayDuration?: number;
  disableHoverableContent?: boolean;
}

const TooltipProvider: React.FC<TooltipProviderProps>;

Provider Configuration

Tooltip Root Management

Individual tooltip instance that manages open/closed state, timing, and accessibility features.

interface TooltipProps {
  children?: React.ReactNode;
  open?: boolean;
  defaultOpen?: boolean;
  onOpenChange?: (open: boolean) => void;
  delayDuration?: number;
  disableHoverableContent?: boolean;
}

const Tooltip: React.FC<TooltipProps>;

Tooltip Root Management

Trigger Interaction

Interactive trigger element that responds to hover, focus, and keyboard events to show/hide tooltips.

type TooltipTriggerElement = React.ComponentRef<"button">;
interface TooltipTriggerProps extends React.ComponentPropsWithoutRef<"button"> {
  asChild?: boolean;
}

const TooltipTrigger: React.forwardRef<TooltipTriggerElement, TooltipTriggerProps>;

Trigger Interaction

Portal Rendering and Content Display

Portal component for rendering tooltip content outside the normal DOM hierarchy, plus the main content component with positioning and accessibility features.

interface TooltipPortalProps {
  children?: React.ReactNode;
  container?: HTMLElement;
  forceMount?: true;
}

interface TooltipContentProps {
  forceMount?: true;
  side?: "top" | "right" | "bottom" | "left";
  sideOffset?: number;
  align?: "start" | "center" | "end";
  alignOffset?: number;
  avoidCollisions?: boolean;
  collisionBoundary?: Element | Element[];
  collisionPadding?: number | Partial<Record<"top" | "right" | "bottom" | "left", number>>;
  arrowPadding?: number;
  sticky?: "partial" | "always";
  hideWhenDetached?: boolean;
  'aria-label'?: string;
  onEscapeKeyDown?: (event: KeyboardEvent) => void;
  onPointerDownOutside?: (event: CustomEvent) => void;
}

const TooltipPortal: React.FC<TooltipPortalProps>;
const TooltipContent: React.forwardRef<HTMLDivElement, TooltipContentProps>;

Portal Rendering and Content Display

Arrow and Visual Enhancement

Optional arrow/pointer component that visually connects the tooltip to its trigger.

interface TooltipArrowProps {
  width?: number;
  height?: number;
  offset?: number;
}

const TooltipArrow: React.forwardRef<SVGSVGElement, TooltipArrowProps>;

Arrow and Visual Enhancement

Utility Functions

Context scoping utilities for advanced tooltip customization and nesting scenarios.

function createTooltipScope(): Scope;

Utility Functions

Types

type TooltipProviderProps = {
  children: React.ReactNode;
  delayDuration?: number;
  skipDelayDuration?: number; 
  disableHoverableContent?: boolean;
};

type TooltipProps = {
  children?: React.ReactNode;
  open?: boolean;
  defaultOpen?: boolean;
  onOpenChange?: (open: boolean) => void;
  delayDuration?: number;
  disableHoverableContent?: boolean;
};

type TooltipTriggerProps = React.ComponentPropsWithoutRef<"button"> & {
  asChild?: boolean;
};

type TooltipPortalProps = {
  children?: React.ReactNode;
  container?: HTMLElement;
  forceMount?: true;
};

type TooltipContentProps = React.ComponentPropsWithoutRef<"div"> & {
  forceMount?: true;
  side?: "top" | "right" | "bottom" | "left";
  sideOffset?: number;
  align?: "start" | "center" | "end";
  alignOffset?: number;
  avoidCollisions?: boolean;
  collisionBoundary?: Element | Element[];
  collisionPadding?: number | Partial<Record<"top" | "right" | "bottom" | "left", number>>;
  arrowPadding?: number;
  sticky?: "partial" | "always";
  hideWhenDetached?: boolean;
  'aria-label'?: string;
  onEscapeKeyDown?: (event: KeyboardEvent) => void;
  onPointerDownOutside?: (event: CustomEvent) => void;
};

type TooltipArrowProps = React.ComponentPropsWithoutRef<"svg"> & {
  width?: number;
  height?: number;
  offset?: number;
};