Multi-Tooltip Configuration Dashboard

Build a React component that displays multiple information tooltips with centrally configured behavior. The component should demonstrate proper tooltip provider setup to ensure consistent timing and interaction across all tooltips.

Requirements

Create a dashboard component that displays four data cards (Users, Revenue, Growth, Alerts), each with an info icon that shows a tooltip on hover. All tooltips should share consistent timing behavior configured at a provider level.

Tooltip Behavior Requirements

• All tooltips should have a 400ms delay before appearing
• After one tooltip closes, the next tooltip should appear instantly if hovered within 200ms
• Tooltips should close immediately when the mouse leaves the trigger area

Component Structure

• Create a Dashboard component that renders four data cards in a grid layout
• Each card should display a metric name and an info icon
• The info icon should trigger a tooltip with explanatory text
• Use provider-level configuration to ensure all tooltips share the same timing behavior

Test Cases

• The dashboard renders four cards with info icons @test
• Hovering over an info icon displays a tooltip after a delay @test
• Moving quickly between tooltips triggers instant display on subsequent tooltips @test
• All tooltips share the configured delay duration from the provider @test

Implementation

@generates

API

import React from 'react';

/**
 * Dashboard component that displays data cards with tooltips
 * @returns A React component displaying a dashboard with tooltips
 */
export function Dashboard(): React.ReactElement;

Dependencies { .dependencies }

@radix-ui/react-tooltip { .dependency }

Provides tooltip components with provider-level configuration support.

@satisfied-by

react { .dependency }

React library for building user interfaces.

@satisfied-by