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

Overall
score

96%

Overview

Eval results

Files

Tooltip Root Management

Name: tessl/npm-radix-ui--react-tooltip
Author: tessl

The Tooltip component manages individual tooltip instances, handling open/closed state, timing overrides, and accessibility features. It serves as the root container for each tooltip.

Capabilities

Tooltip Component

Root tooltip component that manages state and provides context for trigger, portal, and content components.

/**
 * Root tooltip component managing individual tooltip state
 * @param children - Child components (trigger, portal, content)
 * @param open - Controlled open state
 * @param defaultOpen - Initial open state for uncontrolled usage
 * @param onOpenChange - Callback when open state changes
 * @param delayDuration - Override provider delay duration
 * @param disableHoverableContent - Override provider hover behavior
 */
interface TooltipProps {
  children?: React.ReactNode;
  open?: boolean;
  defaultOpen?: boolean;
  onOpenChange?: (open: boolean) => void;
  delayDuration?: number;
  disableHoverableContent?: boolean;
}

const Tooltip: React.FC<TooltipProps>;

Usage Examples:

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

// Basic uncontrolled tooltip
function BasicTooltip() {
  return (
    <TooltipProvider>
      <Tooltip>
        {/* Trigger and content components */}
      </Tooltip>
    </TooltipProvider>
  );
}

// Controlled tooltip with custom state
function ControlledTooltip() {
  const [open, setOpen] = React.useState(false);
  
  return (
    <TooltipProvider>
      <Tooltip open={open} onOpenChange={setOpen}>
        {/* Trigger and content components */}
      </Tooltip>
    </TooltipProvider>
  );
}

// Default open tooltip
function DefaultOpenTooltip() {
  return (
    <TooltipProvider>
      <Tooltip defaultOpen>
        {/* Tooltip starts open */}
      </Tooltip>
    </TooltipProvider>
  );
}

// Custom delay for specific tooltip
function CustomDelayTooltip() {
  return (
    <TooltipProvider delayDuration={700}>
      <Tooltip delayDuration={200}>
        {/* This tooltip opens faster than provider default */}
      </Tooltip>
    </TooltipProvider>
  );
}

Tooltip Props

open

Controls the open state in controlled mode.

Type: boolean
Description: When provided, tooltip becomes controlled and ignores internal state

defaultOpen

Sets initial open state for uncontrolled tooltips.

Type: boolean
Default: false
Description: Initial open state when tooltip is uncontrolled

onOpenChange

Callback triggered when tooltip open state changes.

Type: (open: boolean) => void
Description: Called with new open state when tooltip opens or closes

delayDuration

Overrides provider delay duration for this tooltip instance.

Type: number
Description: Duration in milliseconds from pointer enter until tooltip opens

disableHoverableContent

Overrides provider hover behavior for this tooltip instance.

Type: boolean
Description: When true, tooltip closes when pointer leaves trigger

State Management

The Tooltip component provides two state management patterns:

Uncontrolled (Internal State):

<Tooltip defaultOpen={false}>
  {/* Tooltip manages its own state */}
</Tooltip>

Controlled (External State):

const [open, setOpen] = useState(false);
<Tooltip open={open} onOpenChange={setOpen}>
  {/* You control the state */}
</Tooltip>

Tooltip Context

The Tooltip component creates context providing:

Content ID: Unique identifier for accessibility
Open state: Current open/closed state
State attribute: CSS state attribute (closed, delayed-open, instant-open)
Trigger reference: Reference to trigger element
Event handlers: Functions for opening, closing, and state changes
Configuration: Delay and hover behavior settings

Tooltip Aliases

const Root: React.FC<TooltipProps>;

The Root component is an alias for Tooltip for shorter import names.

Types

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

Install with Tessl CLI

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