Choose a version:

Popover

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

Support

Targets (29)

Supported targets

purchase.checkout.actions.render-before
purchase.checkout.block.render
purchase.checkout.cart-line-item.render-after
purchase.checkout.cart-line-list.render-after
purchase.checkout.contact.render-after
purchase.checkout.delivery-address.render-after
purchase.checkout.delivery-address.render-before
purchase.checkout.footer.render-after
purchase.checkout.header.render-after
purchase.checkout.payment-method-list.render-after
purchase.checkout.payment-method-list.render-before
purchase.checkout.pickup-location-list.render-after
purchase.checkout.pickup-location-list.render-before
purchase.checkout.pickup-location-option-item.render-after
purchase.checkout.pickup-point-list.render-after
purchase.checkout.pickup-point-list.render-before
purchase.checkout.reductions.render-after
purchase.checkout.reductions.render-before
purchase.checkout.shipping-option-item.details.render
purchase.checkout.shipping-option-item.render-after
purchase.checkout.shipping-option-list.render-after
purchase.checkout.shipping-option-list.render-before
purchase.thank-you.announcement.render
purchase.thank-you.block.render
purchase.thank-you.cart-line-item.render-after
purchase.thank-you.cart-line-list.render-after
purchase.thank-you.customer-information.render-after
purchase.thank-you.footer.render-after
purchase.thank-you.header.render-after

Anchor to propertiesProperties

Anchor to blockSize blockSize Default: 'auto': The block size of the popover (height in horizontal writing modes). Learn more about the block-size property.
Anchor to id id string: A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting.
Anchor to inlineSize inlineSize Default: 'auto': The inline size of the popover (width in horizontal writing modes). Learn more about the inline-size property.
Anchor to maxBlockSize maxBlockSize Default: 'none': The maximum block size of the popover. Constrains the popover's height to prevent it from exceeding this value. Learn more about the max-block-size property.
Anchor to maxInlineSize maxInlineSize Default: 'none': The maximum inline size of the popover. Constrains the popover's width to prevent it from exceeding this value. Learn more about the max-inline-size property.
Anchor to minBlockSize minBlockSize Default: '0': The minimum block size of the popover. Ensures the popover maintains at least this height. Learn more about the min-block-size property.
Anchor to minInlineSize minInlineSize Default: '0': The minimum inline size of the popover. Ensures the popover maintains at least this width. Learn more about the min-inline-size property.

SizeUnitsOrAuto

Represents size values that can also be set to `auto` for automatic sizing. - `SizeUnits`: Specific size values in pixels, percentages, or zero for precise control. - `auto`: Automatically sizes based on content and layout constraints. Learn more about the [auto value](https://developer.mozilla.org/en-US/docs/Web/CSS/width#auto).

SizeUnits | "auto"

SizeUnits

Represents size values in pixels, percentages, or zero. - `` `${number}px` ``: Absolute size in pixels for fixed dimensions (such as `100px`, `24px`). - `` `${number}%` ``: Relative size as a percentage of the parent container (such as `50%`, `100%`). - `0`: Zero size, equivalent to no dimension.

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

SizeUnitsOrNone

Represents size values that can also be set to `none` to remove the size constraint. - `SizeUnits`: Specific size values in pixels, percentages, or zero for precise control. - `none`: No size constraint, allowing unlimited growth. Learn more about the [none value](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width#none).

SizeUnits | "none"

Anchor to eventsEvents

Learn more about registering events.

Anchor to hide hide <typeof tagName>: A callback fired immediately after the popover is hidden.
Anchor to show show <typeof tagName>: A callback fired immediately after the popover is shown.

CallbackEventListener

A typed event listener for custom element events. The listener receives a `CallbackEvent` with the correct `currentTarget` type for the associated custom element tag.

(EventListener & {
    (event: CallbackEvent<TTagName, Event> & TData): void;
}) | null

CallbackEvent

An event type that narrows the `currentTarget` to the specific HTML element associated with the custom element tag. This provides type-safe event handling in callback listeners.

TEvent & {
    currentTarget: HTMLElementTagNameMap[TTagName];
}

Examples

<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

Examples

Code

Default

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

Was this page helpful?