# Help popover

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

Tabs: [Guidelines](/components/web/help-popover/help-popover.guidelines.md) · [Code](/components/web/help-popover/help-popover.code.md) · [Content](/components/web/help-popover/help-popover.content.md)

## 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](/components/web/form-control/form-control.guidelines)). 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).

```tsx
<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.

```tsx
<HelpPopover skeleton>Content</HelpPopover>
```

## Interactive content

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

```tsx
<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`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) or [`aria-labelledby`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby) prop to provide a label for the popover. This is required to make the popover accessible for screen reader users.

```tsx
<HelpPopover aria-label="Learn more about: Card limits">...</HelpPopover>
<HelpPopover aria-labelledby="element-id(s)">...</HelpPopover>
```

## Related components

- [Form control](/components/web/form-control/form-control.guidelines): Form control displays a labelled input and, optionally, associated validation text, help popover, and/or hint text.
- [Popover](/components/web/popover/popover.guidelines): A small overlay that opens on demand. Popovers allow users to access additional content and actions without cluttering the page.