Help popoverWarning: Draft
An icon button with a question mark that reveals help information on click or tap.
Features
- Shows a popover when the trigger icon button is activated
- Accessible for keyboard or screen reader users
When to use
We most commonly use the Help popover to provide contextual information next to an input label. For this usecase, see Form control). This standalone version is meant for other contexts, such as in a table header or next to a short paragraph.
Examples
Sizes
The Help popover comes in two sizes: regular and large. These determine the size of the trigger icon (not the popover).
Skeleton
The skeleton property is used to display a loading state for the component while data is being fetched. It provides a visual placeholder, giving users a preview of the UI structure before the actual content is loaded. This enhances the user experience by offering a more accurate representation of the final layout during data retrieval.
Interactive content
The help popover supports interactive content, such as links and buttons.
Accessibility
Always use either the aria-label or aria-labelledby prop to provide a label for the popover. This is required to make the popover accessible for screen reader users.
<HelpPopover aria-label="Learn more about: Card limits">...</HelpPopover><HelpPopover aria-labelledby="element-id(s)">...</HelpPopover>
Related components
- Feature tip: Used to help users learn about new or unfamiliar interface features.
- Form control: Form control displays a labelled input and, optionally, associated validation text and/or hint text.
- Popover: A small overlay that opens on demand. Popovers allow users to access additional content and actions without cluttering the page.