Help popoverDraft

An icon button with a question mark that reveals help information on click or tap.

1,000.00

EUR

Available balance

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).

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>

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.

Didn't find what you were looking for?

Let us know in #team-design-systems or make a request.

Edit page

On this page

This page is a draft. Its content is likely to change.