Scrollable Dashboard Help System

Build a help system for a dashboard interface that displays tooltips for various controls. The dashboard has a scrollable container with multiple sections, and the help tooltips should automatically dismiss when users scroll the content area.

Requirements

Create a React component called ScrollableDashboard that implements:

1. A scrollable container (use overflow: auto or overflow-y: scroll) that contains a list of at least 5 dashboard sections
2. Each section should have a "Help" button that displays a tooltip when hovered
3. The tooltips should automatically close when the user scrolls the container
4. The tooltip content should describe what each section does

Implementation Details

@generates

The component should:

• Render a container with height: 400px and scrollable overflow
• Include sections with enough content to require scrolling
• Display tooltips that explain each section's purpose
• Ensure tooltips dismiss when scrolling occurs

Testing

• The dashboard renders with all sections visible when scrolling @test
• Hovering over a help button displays the tooltip @test
• Scrolling the container causes any open tooltip to close @test

Dependencies { .dependencies }

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

Provides accessible tooltip component primitives for React applications.

react { .dependency }

Provides the React framework for building the component.

@testing-library/react { .dependency }

Provides testing utilities for React components.

API

/**
 * A scrollable dashboard component with help tooltips that automatically
 * dismiss when scrolling occurs.
 */
export function ScrollableDashboard(): JSX.Element;