Device-Aware Help Icon

Build a help icon component that displays tooltip information on desktop hover but does not interfere with mobile touch interactions.

Requirements

Your task is to create a help icon button that shows additional information in a tooltip. The tooltip should:

1. Desktop behavior: Display tooltip content when the user hovers over the help icon
2. Mobile behavior: Not display the tooltip when the user taps the help icon on touch devices
3. Keyboard accessibility: Display tooltip when the help icon receives keyboard focus
4. Positioning: Tooltip should appear above the help icon by default
5. Content: Display the help text provided via props

Component Interface

Create a component called HelpIcon that accepts the following props:

• helpText: string - The text to display in the tooltip
• label?: string - Optional accessible label for the help icon (defaults to "Help")

The component should render a button with a "?" character or help icon that triggers the tooltip.

Test Cases

• When the help icon receives pointer hover on desktop (pointer type 'mouse' or 'pen'), the tooltip displays the help text @test
• When the help icon receives a touch event (pointer type 'touch'), the tooltip does not display @test
• When the help icon receives keyboard focus, the tooltip displays the help text @test
• The tooltip closes when the pointer leaves the help icon on desktop @test

Implementation

@generates

API

export interface HelpIconProps {
  helpText: string;
  label?: string;
}

export function HelpIcon(props: HelpIconProps): JSX.Element;

Dependencies { .dependencies }

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

Provides accessible tooltip components with pointer event handling.