---
title: Popover
description: >-
  Popovers are similar to tooltips. They are small overlays that open on demand
  after a user interaction. The difference is that the popover can contain more
  content, without cluttering the page. They must be specified inside the
  `overlay` prop of an activator component (`Button`, `Link` or `Pressable`).


  The library automatically applies the WAI-ARIA Popover Widget pattern to both
  the activator and the popover content.
api_version: 2024-10
api_name: checkout-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/components/overlays/popover
  md: >-
    https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/components/overlays/popover.md
---

# Popover

Popovers are similar to tooltips. They are small overlays that open on demand after a user interaction. The difference is that the popover can contain more content, without cluttering the page. They must be specified inside the `overlay` prop of an activator component (`Button`, `Link` or `Pressable`).

The library automatically applies the WAI-ARIA Popover Widget pattern to both the activator and the popover content.

## PopoverProps

* alignment

  Alignment

  Default: 'center'

  Align the Popover in the axis determined by the position.

* id

  string

  A unique identifier for the component.

* maxInlineSize

  MaybeResponsiveConditionalStyle< number | \`${number}%\` | 'fill' >

  Adjust the maximum inline size.

  `number`: size in pixels.

  `` `${number}%` ``: size in percentages.

  `fill`: takes all the available space.

  See [MDN explanation of maxInlineSize](https://developer.mozilla.org/en-US/docs/Web/CSS/max-inline-size).

* minInlineSize

  MaybeResponsiveConditionalStyle< number | \`${number}%\` | 'fill' >

  Adjust the minimum inline size.

  `number`: size in pixels.

  `` `${number}%` ``: size in percentages.

  `fill`: takes all the available space.\\

  See [MDN explanation of minInlineSize](https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size).

* onClose

  () => void

  Callback to run when the Popover is closed

* onOpen

  () => void

  Callback to run when the Popover is opened

* padding

  MaybeResponsiveConditionalStyle\<MaybeShorthandProperty\<Spacing>>

  Adjust the padding.

  To shorten the code, it is possible to specify all the padding properties in one property.

  Examples:

  * `base` means blockStart, inlineEnd, blockEnd and inlineStart paddings are `base`

  * \[`base`, `none`] means blockStart and blockEnd paddings are `base`, inlineStart and inlineEnd paddings are `none`

  * \[`base`, `none`, `loose`, `tight`] means blockStart padding is `base`, inlineEnd padding is `none`, blockEnd padding is `loose` and blockStart padding is `tight`

* position

  PopoverPosition

  Default: 'blockStart'

  Position the Popover relative to the activator.

### Alignment

```ts
'start' | 'center' | 'end'
```

### MaybeResponsiveConditionalStyle

A type that represents a value that can be a conditional style. The conditions are based on the viewport size. We highly recommend using the \`Style\` helper which simplifies the creation of conditional styles. To learn more check out the \[conditional styles]\(/api/checkout-ui-extensions/components/utilities/stylehelper) documentation.

```ts
T | ConditionalStyle<T, ViewportSizeCondition>
```

### ConditionalStyle

* conditionals

  An array of conditional values.

  ```ts
  ConditionalValue<T, AcceptedConditions>[]
  ```

* default

  The default value applied when none of the conditional values specified in \`conditionals\` are met.

  ```ts
  T
  ```

```ts
export interface ConditionalStyle<
  T,
  AcceptedConditions extends BaseConditions = Conditions,
> {
  /**
   * The default value applied when none of the conditional values
   * specified in `conditionals` are met.
   */
  default?: T;
  /**
   * An array of conditional values.
   */
  conditionals: ConditionalValue<T, AcceptedConditions>[];
}
```

### ConditionalValue

* conditions

  The conditions that must be met for the value to be applied. At least one condition must be specified.

  ```ts
  AcceptedConditions
  ```

* value

  The value that will be applied if the conditions are met.

  ```ts
  T
  ```

```ts
export interface ConditionalValue<
  T,
  AcceptedConditions extends BaseConditions = Conditions,
> {
  /**
   * The conditions that must be met for the value to be applied. At least one
   * condition must be specified.
   */
  conditions: AcceptedConditions;
  /**
   * The value that will be applied if the conditions are met.
   */
  value: T;
}
```

### ViewportSizeCondition

* viewportInlineSize

  ```ts
  { min: T; }
  ```

```ts
export interface ViewportSizeCondition<T = ViewportInlineSize> {
  viewportInlineSize: {min: T};
}
```

### MaybeShorthandProperty

```ts
T | ShorthandProperty<T>
```

### ShorthandProperty

```ts
[T, T] | [T, T, T, T]
```

### Spacing

```ts
'none' | 'extraTight' | 'tight' | 'base' | 'loose' | 'extraLoose'
```

### PopoverPosition

```ts
'inlineStart' | 'inlineEnd' | 'blockStart' | 'blockEnd'
```

### Examples

* #### Basic Popover

  ##### React

  ```tsx
  import {
    reactExtension,
    Pressable,
    Popover,
    View,
    TextBlock,
  } from '@shopify/ui-extensions-react/checkout';

  export default reactExtension(
    'purchase.checkout.block.render',
    () => <Extension />,
  );

  function Extension() {
    return (
      <Pressable
        overlay={
          <Popover>
            <View
              maxInlineSize={200}
              padding="base"
            >
              <TextBlock>
                A thoughtful way to pay
              </TextBlock>
              <TextBlock>Tap don’t type</TextBlock>
              <TextBlock>
                Shop Pay remembers your important
                details, so you can fill carts, not
                forms. And everything is encrypted
                so you can speed safely through
                checkout.
              </TextBlock>
            </View>
          </Popover>
        }
      >
        More info
      </Pressable>
    );
  }
  ```

  ##### JS

  ```js
  import {
    extension,
    Pressable,
    Popover,
    View,
    TextBlock,
  } from '@shopify/ui-extensions/checkout';

  export default extension('purchase.checkout.block.render', (root) => {
    const popoverFragment = root.createFragment();
    const popover = root.createComponent(Popover, {}, [
      root.createComponent(View, {maxInlineSize: 200, padding: 'base'}, [
        root.createComponent(TextBlock, {}, 'A thoughtful way to pay'),
        root.createComponent(TextBlock, {}, 'Tap don’t type'),
        root.createComponent(
          TextBlock,
          {},
          'Shop Pay remembers your important details, so you can fill carts, not forms. And everything is encrypted so you can speed safely through checkout.',
        ),
      ]),
    ]);
    popoverFragment.appendChild(popover);
    const pressable = root.createComponent(
      Pressable,
      {overlay: popoverFragment},
      'More info',
    );

    root.appendChild(pressable);
  });
  ```

## Preview

![](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2024-10/popover-default.png)

## Best Practices

Use popovers if:

* The intent is to ask the customer for information.

* It’s possible to use at most two rows of input fields to get the information.

## Related

[API - Ui](ui)