Contextual Help
Contextual help can be used to show extra information about the state of a component.
Example
For the contextual help component, both the heading and content props are required, while the footer prop is optional.
Placement
The contextual help component supports different placement options for when the popover’s positioning needs to be customized.
Events
The on_open_change prop is triggered when the popover opens or closes.
Visual Options
The variant prop can be set to either “info” or “help”, depending on how the contextual help component is meant to help the user.
API reference
A contextual help is a quiet action button that triggers an informational popover.
Returns: Element The rendered contextual help component.
| Parameters | Type | Default | Description |
|---|---|---|---|
| heading | Any | The heading of the popover. | |
| content | Any | The content of the popover. | |
| footer | Any | None | The footer of the popover. |
| variant | Literal['help', 'info'] | None | 'help' | Indicates whether contents are informative or provides helpful guidance. |
| placement | Literal['bottom', 'bottom left', 'bottom right', 'bottom start', 'bottom end', 'top', 'top left', 'top right', 'top start', 'top end', 'left', 'left top', 'left bottom', 'start', 'start top', 'start bottom', 'right', 'right top', 'right bottom', 'end', 'end top'] | None | 'bottom start' | The placement of the popover relative to the action button. |
| is_open | bool | None | None | Whether the popover is open by default (controlled). |
| default_open | bool | None | None | Whether the popover is open by default (uncontrolled). |
| container_padding | float | None | None | The placement padding that should be applied between the element and its surrounding container. |
| offset | float | None | None | The additional offset applied along the main axis between the element and its anchor element. |
| cross_offset | float | None | None | The additional offset applied along the cross axis between the element and its anchor element. |
| should_flip | bool | None | None | Whether the element should flip its orientation when there is insufficient room for it to render completely. |
| key | str | None | None | A unique identifier used by React to render elements in a list. |
Content represents the primary content within a Spectrum container.
Returns: Element The rendered content element.
| Parameters | Type | Default | Description |
|---|---|---|---|
| *children | Any | The content to render within the container. | |
| key | str | None | None | A unique identifier used by React to render elements in a list. |
A footer for a document or section.
Returns: Element The rendered footer element.
| Parameters | Type | Default | Description |
|---|---|---|---|
| *children | None | bool | int | str | Element | List[NodeType] | The items to render within the footer. | |
| key | str | None | None | A unique identifier used by React to render elements in a list. |