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.

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

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`, `large200`, `small200`] means blockStart padding is `base`, inlineEnd padding is `none`, blockEnd padding is `large200` and blockStart padding is `small200`

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' | 'small500' | 'small400' | 'small300' | 'small200' | 'small100' | 'base' | 'large100' | 'large200' | 'large300' | 'large400' | 'large500' | SpacingDeprecated

SpacingDeprecated

'extraTight' | 'tight' | 'loose' | 'extraLoose'