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

Provider Configuration

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

The TooltipProvider component manages global tooltip behavior and timing across all tooltips in your application. It provides context for delay timing, hover behavior, and skip delay functionality.

Capabilities

TooltipProvider Component

Global context provider that wraps your application or section containing tooltips.

/**
 * Provider component for managing global tooltip behavior and timing
 * @param children - Child components containing tooltips
 * @param delayDuration - Duration in ms from pointer enter until tooltip opens (default: 700)
 * @param skipDelayDuration - Duration in ms user has to enter another trigger without delay (default: 300)
 * @param disableHoverableContent - When true, hovering content closes tooltip (default: false)
 */
interface TooltipProviderProps {
  children: React.ReactNode;
  delayDuration?: number;
  skipDelayDuration?: number;
  disableHoverableContent?: boolean;
}

const TooltipProvider: React.FC<TooltipProviderProps>;

Usage Examples:

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

// Basic provider with default settings
function App() {
  return (
    <TooltipProvider>
      {/* Your tooltip components */}
    </TooltipProvider>
  );
}

// Custom delay timing
function CustomApp() {
  return (
    <TooltipProvider
      delayDuration={500}
      skipDelayDuration={200}
      disableHoverableContent={false}
    >
      {/* Your tooltip components */}
    </TooltipProvider>
  );
}

// Disable hoverable content globally
function SimpleTooltips() {
  return (
    <TooltipProvider disableHoverableContent>
      {/* Tooltips will close when pointer leaves trigger */}
    </TooltipProvider>
  );
}

Provider Props

delayDuration

Controls the delay before tooltip opens when pointer enters trigger.

Type: number
Default: 700 (milliseconds)
Description: Duration from pointer enter until tooltip opens

skipDelayDuration

Controls how long user has to enter another trigger without delay.

Type: number
Default: 300 (milliseconds)
Description: Time window for entering another tooltip trigger without incurring delay again

disableHoverableContent

Controls whether tooltip content can be hovered.

Type: boolean
Default: false
Description: When true, trying to hover content closes tooltip as pointer leaves trigger

Provider Context

The provider creates a context that manages:

Delay state tracking: Whether subsequent tooltips should have delays
Transit state: Whether pointer is in transit between trigger and content
Global configuration: Default settings inherited by all child tooltips
Event coordination: Opening one tooltip closes others

Provider Aliases

const Provider: React.FC<TooltipProviderProps>;

The Provider component is an alias for TooltipProvider for shorter import names.

Types

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

Install with Tessl CLI

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