# 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',
() => ,
);
function Extension() {
return (
A thoughtful way to pay
Tap don’t type
Shop Pay remembers your important
details, so you can fill carts, not
forms. And everything is encrypted
so you can speed safely through
checkout.
}
>
More info
);
}
```
```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
- 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[];
}
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
- 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[];
}
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>`
- MaybeResponsiveConditionalStyle: T | ConditionalStyle
- 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[];
}
- MaybeShorthandProperty: T | ShorthandProperty
- 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[]`
- 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)