# 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 takes care of applying the WAI-ARIA Popover Widget pattern automatically for the activator and the popover content.

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

render('Checkout::Dynamic::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
import {
  extend,
  Pressable,
  Popover,
  View,
  TextBlock,
} from '@shopify/checkout-ui-extensions';

extend('Checkout::Dynamic::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);
});

```

## PopoverProps

### PopoverProps

### position

value: `PopoverPosition`

  - PopoverPosition: 'inlineStart' | 'inlineEnd' | 'blockStart' | 'blockEnd'
Position the Popover relative to the activator.

### alignment

value: `Alignment`

  - Alignment: 'start' | 'center' | 'end'
Align the Popover in the axis determined by the position.

### onOpen

value: `() => void`

Callback to run when the Popover is opened

### onClose

value: `() => void`

Callback to run when the Popover is closed

### id

value: `string`

A unique identifier for the component.

### maxInlineSize

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

  - MaybeResponsiveConditionalStyle: T | ConditionalStyle<T, ViewportSizeCondition>
  - ConditionalStyle: 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>[];
}
Adjust the maximum inline size.

`number`: size in pixels.

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

`fill`: takes all the available space.

### minInlineSize

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

  - MaybeResponsiveConditionalStyle: T | ConditionalStyle<T, ViewportSizeCondition>
  - ConditionalStyle: 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>[];
}
Adjust the minimum inline size.

`number`: size in pixels.

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

`fill`: takes all the available space.

### padding

value: `MaybeResponsiveConditionalStyle<MaybeShorthandProperty<Spacing>>`

  - MaybeResponsiveConditionalStyle: T | ConditionalStyle<T, ViewportSizeCondition>
  - ConditionalStyle: 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>[];
}
  - MaybeShorthandProperty: T | ShorthandProperty<T>
  - ShorthandProperty: [T, T] | [T, T, T, T]
  - Spacing: 'none' | 'base' | 'extraTight' | 'tight' | 'loose' | 'extraLoose'
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`

### ConditionalStyle

### default

value: `T`

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

### conditionals

value: `ConditionalValue<T, AcceptedConditions>[]`

  - ConditionalValue: 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;
}
An array of conditional values.

### ConditionalValue

### conditions

value: `AcceptedConditions`

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

### value

value: `T`

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

### ViewportSizeCondition

### viewportInlineSize

value: `{ min: ViewportInlineSize; }`

  - ViewportInlineSize: 'small' | 'medium' | 'large'