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 alignmentalignmentDefault: 'center'
Align the Popover in the axis determined by the position.
- string
A unique identifier for the component.
- Anchor to maxInlineSizemaxInlineSize< number | `${number}%` | 'fill' >
Adjust the maximum inline size.
number
: size in pixels.`${number}%`
: size in percentages.fill
: takes all the available space.- Anchor to minInlineSizeminInlineSize< number | `${number}%` | 'fill' >
Adjust the minimum inline size.
number
: size in pixels.`${number}%`
: size in percentages.fill
: takes all the available space.\- Anchor to onCloseonClose() => void
Callback to run when the Popover is closed
- Anchor to onOpenonOpen() => void
Callback to run when the Popover is opened
- Anchor to paddingpadding<<>>
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 arebase
[
base
,none
] means blockStart and blockEnd paddings arebase
, inlineStart and inlineEnd paddings arenone
[
base
,none
,loose
,tight
] means blockStart padding isbase
, inlineEnd padding isnone
, blockEnd padding isloose
and blockStart padding istight
- Anchor to positionpositionDefault: 'blockStart'
Position the Popover relative to the activator.
PopoverProps
- alignment
Align the Popover in the axis determined by the position.
Alignment
- id
A unique identifier for the component.
string
- maxInlineSize
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).
MaybeResponsiveConditionalStyle< number | `${number}%` | 'fill' >
- minInlineSize
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).
MaybeResponsiveConditionalStyle< number | `${number}%` | 'fill' >
- onClose
Callback to run when the Popover is closed
() => void
- onOpen
Callback to run when the Popover is opened
() => void
- 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`
MaybeResponsiveConditionalStyle<MaybeShorthandProperty<Spacing>>
- position
Position the Popover relative to the activator.
PopoverPosition
export interface PopoverProps
extends IdProps,
Pick<SizingProps, 'maxInlineSize' | 'minInlineSize'>,
Pick<SpacingProps, 'padding'> {
/**
* Position the Popover relative to the activator.
* @defaultValue 'blockStart'
*/
position?: PopoverPosition;
/**
* Align the Popover in the axis determined by the position.
* @defaultValue 'center'
*/
alignment?: Alignment;
/**
* Callback to run when the Popover is opened
*/
onOpen?: () => void;
/**
* Callback to run when the Popover is closed
*/
onClose?: () => void;
}
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
- conditionals
An array of conditional values.
ConditionalValue<T, AcceptedConditions>[]
- default
The default value applied when none of the conditional values specified in `conditionals` are met.
T
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>[];
}
ConditionalValue
- conditions
The conditions that must be met for the value to be applied. At least one condition must be specified.
AcceptedConditions
- value
The value that will be applied if the conditions are met.
T
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;
}
ViewportSizeCondition
- viewportInlineSize
{ min: T; }
export interface ViewportSizeCondition<T = ViewportInlineSize> {
viewportInlineSize: {min: T};
}
MaybeShorthandProperty
T | ShorthandProperty<T>
ShorthandProperty
[T, T] | [T, T, T, T]
Spacing
'none' | 'extraTight' | 'tight' | 'base' | 'loose' | 'extraLoose'
PopoverPosition
'inlineStart' | 'inlineEnd' | 'blockStart' | 'blockEnd'
Basic Popover
examples
Basic Popover
React
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); });
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.