Skip to main content

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.

Anchor to popoverpropsPopoverProps

Anchor to alignment
alignment
Default: 'center'

Align the Popover in the axis determined by the position.

Anchor to id
id
string

A unique identifier for the component.

Anchor to maxInlineSize
maxInlineSize
< 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.

Anchor to minInlineSize
minInlineSize
< 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.

Anchor to onClose
onClose
() => void

Callback to run when the Popover is closed

Anchor to onOpen
onOpen
() => void

Callback to run when the Popover is opened

Anchor to padding
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

Anchor to position
position
Default: 'blockStart'

Position the Popover relative to the activator.

Was this section helpful?

Basic Popover

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

Preview

Anchor to best-practicesBest 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.

Was this section helpful?

Anchor to relatedRelated

APIUi