---
title: Popover
description: Popovers are used to display content in an overlay that can be triggered by a button.
api_name: app-home
source_url:
  html: https://shopify.dev/docs/api/app-home/polaris-web-components/overlays/popover
  md: https://shopify.dev/docs/api/app-home/polaris-web-components/overlays/popover.md
---

# 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.

* 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

Learn more about [registering events](https://shopify.dev/docs/api/app-home/using-polaris-components#event-handling).

* afterhide

  CallbackEventListener\<TTagName> | null

* aftershow

  CallbackEventListener\<TTagName> | null

* aftertoggle

  CallbackEventListener\<TTagName> | null

* hide

  CallbackEventListener\<TTagName> | null

* show

  CallbackEventListener\<TTagName> | null

* toggle

  CallbackEventListener\<TTagName> | null

### CallbackEventListener

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

### CallbackEvent

```ts
Event & {
  currentTarget: HTMLElementTagNameMap[T];
}
```

## Slots

* children

  HTMLElement

  The content of the Popover.

### Examples

* #### Code

  ##### Default

  ```html
  <s-button commandFor="product-options-popover">Product options</s-button>

  <s-popover id="product-options-popover">
    <s-stack direction="block">
      <s-button variant="tertiary">Import</s-button>
      <s-button variant="tertiary">Export</s-button>
    </s-stack>
  </s-popover>
  ```