Help Button Tooltip

A help button component that shows a tooltip with dismissal capabilities.

Capabilities

Display help tooltip on hover

The button shows a "?" icon. When the user hovers over the button, a tooltip appears with the help text.

• Hovering over the help button displays the tooltip with the provided help text @test

Dismiss tooltip with Escape key

• When the tooltip is visible and the user presses the Escape key, the tooltip closes @test

Dismiss tooltip when trigger loses focus

• When the tooltip is visible and the trigger button loses focus, the tooltip closes @test

Dismiss tooltip on trigger click

• When the tooltip is visible and the user clicks the trigger button, the tooltip closes @test

Dismiss tooltip on scroll

• When the tooltip is visible and the page is scrolled, the tooltip closes @test

Implementation

@generates

API

import React from 'react';

export interface HelpButtonTooltipProps {
  /** The help text to display in the tooltip */
  helpText: string;
}

/**
 * A help button component that displays a "?" icon and shows a tooltip
 * with help text when hovered or focused. The tooltip dismisses on:
 * Escape key press, trigger blur, trigger click, or page scroll.
 */
export default function HelpButtonTooltip(props: HelpButtonTooltipProps): React.ReactElement;

Dependencies { .dependencies }

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

Provides tooltip component primitives with built-in dismissal behavior on escape, blur, click, and scroll events.

@satisfied-by