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

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

### position
Position the Popover relative to the activator.
### alignment
Align the Popover in the axis determined by the position.
### onOpen
Callback to run when the Popover is opened
### onClose
Callback to run when the Popover is closed
### id
A unique identifier for the component.
### maxInlineSize
Adjust the maximum inline size.

`number`: size in pixels.

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

`fill`: takes all the available space.
### minInlineSize
Adjust the minimum inline size.

`number`: size in pixels.

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

`fill`: takes all the available space.
### padding
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`
### PopoverPosition

'inlineStart' | 'inlineEnd' | 'blockStart' | 'blockEnd'
### Alignment

'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.
T | ConditionalStyle<T, ViewportSizeCondition>
### ConditionalStyle

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

### conditions
The conditions that must be met for the value to be applied. At least one
condition must be specified.
### value
The value that will be applied if the conditions are met.
### ViewportSizeCondition

### viewportInlineSize

### ViewportInlineSize

'small' | 'medium' | 'large'
### MaybeShorthandProperty

T | ShorthandProperty<T>
### ShorthandProperty

[T, T] | [T, T, T, T]
### Spacing

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