ContextualHelp

Copy for LLM

A contextual help component that displays helpful information in a popover when a user interacts with an icon button.

Import

import { ContextualHelp } from "@cfa/react-core";

The ContextualHelp component supports two icon variants: info (default) and help.

Control the size of the icon button using the size prop.

Control where the popover appears relative to the trigger button using the placement prop. The default placement is "bottom left".

Visit the Documentation Site for the full list of props.

Name	Type	Default	Description
className	`string`	-	-
placement	`Placements`	`bottom left`	The placement of the element with respect to its anchor element.
size	`"xs" \| "sm" \| "md" \| "lg" \| "xl"`	`md`	-
variant	`"help" \| "info"`	`info`	-
aria-label	`string`	-	Defines a string value that labels the current element.
defaultOpen	`boolean`	-	Whether the overlay is open by default (uncontrolled).
isOpen	`boolean`	-	Whether the overlay is open by default (controlled).
onOpenChange	`(isOpen: boolean) => void`	-	Handler that is called when the overlay's open state changes.