Skip to content
Telescope
Components

Help popover

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

Show code
<Inline space={8}>
    <HelpPopover aria-label="Learn more about: Available balance" size="regular">
        Available balance = Current balance + Pleo Reserve limit - Pending purchases.
    </HelpPopover>
    <HelpPopover aria-label="Learn more about: Available balance" size="large">
        Available balance = Current balance + Pleo Reserve limit - Pending purchases.
    </HelpPopover>
</Inline>

Skeleton

Use a "skeleton" version of this component to display a loading state 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.

Show code
<HelpPopover skeleton>Content</HelpPopover>

Interactive content

The help popover supports interactive content, such as links and buttons.

Show code
<HelpPopover aria-label="Learn more about: Card limits">
    You can set two types of limits on cards: monthly limits reset at the beginning of every month,
    whereas total limits apply from when you first set them and have to be reset manually.{' '}
    <Link target="_blank" href="https://help.pleo.io/en/articles/2628431">
        Read more
    </Link>
</HelpPopover>

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

  • Form control: Form control displays a labelled input and, optionally, associated validation text, help popover, 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 this page