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

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.

style?

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

isDisabled?

Whether the button is disabled.

autoFocus?

Whether the element should receive focus on render.

type?

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

Defaults to 'button'.
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.

value?

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

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.

className?

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

name?

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

isOpen?

Whether the overlay is open by default (controlled).

defaultOpen?

Whether the overlay is open by default (uncontrolled).

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.
offset?

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

Defaults to 8.
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.