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

Trigger Interaction

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

The TooltipTrigger component handles user interactions that show and hide tooltips. It responds to hover, focus, keyboard events, and touch interactions while maintaining accessibility.

Capabilities

TooltipTrigger Component

Interactive trigger element that responds to user interactions to control tooltip visibility.

/**
 * Interactive trigger element for showing/hiding tooltips
 * Extends all standard button element props and event handlers
 * @param children - Content of the trigger element
 * @param asChild - When true, merges props with child element instead of rendering button
 */
type TooltipTriggerElement = React.ComponentRef<"button">;
interface TooltipTriggerProps extends React.ComponentPropsWithoutRef<"button"> {
  asChild?: boolean;
}

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

Usage Examples:

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

// Basic button trigger
function BasicTrigger() {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger>Hover me</TooltipTrigger>
        <TooltipPortal>
          <TooltipContent>Tooltip content</TooltipContent>
        </TooltipPortal>
      </Tooltip>
    </TooltipProvider>
  );
}

// Using asChild to trigger on custom element
function CustomTrigger() {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger asChild>
          <button className="custom-button">
            Custom styled button
          </button>
        </TooltipTrigger>
        <TooltipPortal>
          <TooltipContent>Tooltip for custom button</TooltipContent>
        </TooltipPortal>
      </Tooltip>
    </TooltipProvider>
  );
}

// Trigger with icon and text
function IconTrigger() {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger asChild>
          <button>
            <Icon name="help" />
            Help
          </button>
        </TooltipTrigger>
        <TooltipPortal>
          <TooltipContent>Get help with this feature</TooltipContent>
        </TooltipPortal>
      </Tooltip>
    </TooltipProvider>
  );
}

// Trigger with event handlers
function EventHandlerTrigger() {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger
          onClick={() => console.log("Clicked!")}
          onFocus={() => console.log("Focused!")}
        >
          Interactive trigger
        </TooltipTrigger>
        <TooltipPortal>
          <TooltipContent>Click or focus me</TooltipContent>
        </TooltipPortal>
      </Tooltip>
    </TooltipProvider>
  );
}

Trigger Props

asChild

Merges props with child element instead of rendering default button.

Type: boolean
Default: false
Description: When true, trigger props are merged with the child element

Standard Button Props

The trigger accepts all standard HTML button props:

onClick: (event: MouseEvent) => void
onFocus: (event: FocusEvent) => void
onBlur: (event: FocusEvent) => void
onPointerMove: (event: PointerEvent) => void
onPointerLeave: (event: PointerEvent) => void
onPointerDown: (event: PointerEvent) => void
disabled: boolean
className: string
style: React.CSSProperties
All other button attributes

Interaction Behavior

Hover Interactions

Pointer Enter: Triggers tooltip opening with delay
Pointer Leave: Triggers tooltip closing or grace period
Touch Devices: Touch interactions are ignored for hover behavior

Focus Interactions

Focus: Opens tooltip immediately (no delay)
Blur: Closes tooltip immediately
Keyboard Navigation: Full tab and arrow key support

Click Interactions

Click: Closes tooltip if open
Pointer Down: Closes tooltip and prevents focus opening

Grace Area Behavior

The trigger participates in grace area calculations:

When pointer leaves trigger, grace area is created between trigger and content
If pointer stays within grace area, tooltip remains open
If pointer exits grace area, tooltip closes

Accessibility Features

The trigger automatically handles accessibility:

aria-describedby: Set to tooltip content ID when open
data-state: Reflects tooltip state (closed, delayed-open, instant-open)
Keyboard support: Full keyboard navigation
Screen reader support: Proper ARIA relationships
Focus management: Appropriate focus handling

Trigger Aliases

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

The Trigger component is an alias for TooltipTrigger for shorter import names.

Types

type TooltipTriggerElement = React.ComponentRef<"button">;

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

Install with Tessl CLI

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