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

```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
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);
});

```

## PopoverProps

### PopoverProps

### alignment

value: `Alignment`

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

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

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

### 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.\

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

### onClose

value: `() => void`

Callback to run when the Popover is closed

### onOpen

value: `() => void`

Callback to run when the Popover is opened

### 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' | 'extraTight' | 'tight' | 'base' | '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`

### position

value: `PopoverPosition`

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

### ConditionalStyle

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

### default

value: `T`

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

### 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: T; }`


## Related

- [Ui](ui)