Hopper

ContextualHelp

Contextual help shows a user extra information about the state of an adjacent component. It explains a high-level topic about an experience and can point users to more information elsewhere.

View sourceView on npmReport an issue
AI Tip Want to skip the docs? Use the MCP Server

Usage

Variants

A contextual help can use different variants.

Sizes

A contextual help can have different sizes.

Props

children

The contents of the ContextualHelp.

size?

The size of the ContextualHelp button.

Defaults to sm.
popoverProps?

The props for the Popover

variant?

The visual style of the ContextualHelp.

Defaults to help.
form?

The element to associate the button with. The value of this attribute must be the id of a in the same document. See MDN.

style?

The inline style for the element. A function may be provided to compute the style based on component state.

className?

The CSS className for the element. A function may be provided to compute the class based on component state.

Defaults to 'react-aria-Button'.
isDisabled?

Whether the button is disabled.

render?

Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components.

Requirements:

  • You must render the expected element type (e.g. if <button> is expected, you cannot render an <a>).
  • Only a single root DOM element can be rendered (no fragments).
  • You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.
dir?
lang?
inert?
translate?
value?

The value associated with the button's name when it's submitted with the form data.

name?

Submitted as a pair with the button's value as part of the form data.

type?

The behavior of the button when used in an HTML form.

Defaults to 'button'.
autoFocus?

Whether the element should receive focus on render.

isPending?

Whether the button is in a pending state. This disables press and hover events while retaining focusability, and announces the pending state to screen readers.

formAction?

The URL that processes the information submitted by the button. Overrides the action attribute of the button's form owner.

formEncType?

Indicates how to encode the form data that is submitted.

formMethod?

Indicates the HTTP method used to submit the form.

formNoValidate?

Indicates that the form is not to be validated when it is submitted.

formTarget?

Overrides the target attribute of the button's form owner.

isOpen?

Whether the overlay is open by default (controlled).

defaultOpen?

Whether the overlay is open by default (uncontrolled).

offset?

The additional offset applied along the main axis between the element and its anchor element.

Defaults to 8.
shouldFlip?

Whether the element should flip its orientation (e.g. top to bottom or left to right) when there is insufficient room for it to render completely.

Defaults to true.
crossOffset?

The additional offset applied along the cross axis between the element and its anchor element.

Defaults to 0.
placement?

The placement of the popover with respect to its anchor element.

Defaults to bottom.