---
title: Popover
description: >-
  Popovers are used to display content in an overlay that can be triggered by a
  button.
api_version: 2025-10
api_name: checkout_ui_extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/checkout-ui-extensions/2025-10-rc/polaris-web-components/overlays/popover
  md: >-
    https://shopify.dev/docs/api/checkout-ui-extensions/2025-10-rc/polaris-web-components/overlays/popover.txt
---

# Popover

Popovers are used to display content in an overlay that can be triggered by a button.

## Properties

* blockSize

  SizeUnitsOrAuto

  Default: 'auto'

  Adjust the block size.

* id

  string

  A unique identifier for the element.

* inlineSize

  SizeUnitsOrAuto

  Default: 'auto'

  Adjust the inline size.

* maxBlockSize

  SizeUnitsOrNone

  Default: 'none'

  Adjust the maximum block size.

* maxInlineSize

  SizeUnitsOrNone

  Default: 'none'

  Adjust the maximum inline size.

* minBlockSize

  SizeUnits

  Default: '0'

  Adjust the minimum block size.

* minInlineSize

  SizeUnits

  Default: '0'

  Adjust the minimum inline size.

### SizeUnitsOrAuto

```ts
SizeUnits | "auto"
```

### SizeUnits

```ts
`${number}px` | `${number}%` | `0`
```

### SizeUnitsOrNone

```ts
SizeUnits | "none"
```

## Events

* hide

  ((event: CallbackEventListener\<typeof tagName>) => void) | null

  Callback fired after the overlay is hidden.

* show

  ((event: CallbackEventListener\<typeof tagName>) => void) | null

  Callback fired after the overlay is shown.

### CallbackEventListener

```ts
(EventListener & {
    (event: CallbackEvent<TTagName, TEvent>): void;
}) | null
```

### CallbackEvent

```ts
TEvent & {
    currentTarget: HTMLElementTagNameMap[TTagName];
}
```

### Examples

* #### Code

  ##### Default

  ```html
  <s-button commandFor="popover-veteran-id">Open Popover</s-button>
  <s-popover id="popover-veteran-id">
    <s-stack gap="base" padding="base" direction="inline">
      <s-text-field label="Veteran ID"></s-text-field>
      <s-button variant="primary">Validate</s-button>
    </s-stack>
  </s-popover>
  ```

## Preview

![](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2025-10-rc/popover-default.png)