Skip to main content

Popover

The popover component displays contextual content in an overlay triggered by a button. Use for secondary actions, settings, or information that doesn't require a full modal.

For interactions that need more space or user focus, such as confirmations or complex forms, use modal instead.

Popovers don't support nesting — opening a second popover while one is already visible closes the first. Popovers open in response to buyer interaction only, not programmatically on page load.

Support
Targets (29)

Supported targets

Anchor to PropertiesProperties

Configure the following properties on the popover component.

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.

Anchor to EventsEvents

The popover component provides event callbacks for handling user interactions. Learn more about handling 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.

Anchor to ExamplesExamples

Anchor to Verify a veteran IDVerify a veteran ID

Collect buyer input in a popover without leaving the page. This example opens a popover from a button and shows a veteran ID form inside it.

Verify a veteran ID

A rendered example of the popover component

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>

Anchor to Show a scrollable size chartShow a scrollable size chart

Cap the popover height so long content scrolls instead of expanding the page. This example shows a size chart with maxBlockSize set to limit the visible area.

html

<s-button commandFor="size-guide">Size guide</s-button>

<s-popover id="size-guide" maxBlockSize="250px">
<s-stack padding="base">
<s-text type="strong">Size chart (chest measurement)</s-text>
<s-stack>
<s-stack direction="inline" justifyContent="space-between">
<s-text>S</s-text>
<s-text color="subdued">34-36 in</s-text>
</s-stack>
<s-stack direction="inline" justifyContent="space-between">
<s-text>M</s-text>
<s-text color="subdued">38-40 in</s-text>
</s-stack>
<s-stack direction="inline" justifyContent="space-between">
<s-text>L</s-text>
<s-text color="subdued">42-44 in</s-text>
</s-stack>
<s-stack direction="inline" justifyContent="space-between">
<s-text>XL</s-text>
<s-text color="subdued">46-48 in</s-text>
</s-stack>
</s-stack>
</s-stack>
</s-popover>

Anchor to Show active promotionsShow active promotions

List discount codes in a small overlay near the trigger button. This example shows a popover containing promotion details and a close button.

html

<s-button commandFor="promo-popover">Promotions</s-button>

<s-popover id="promo-popover">
<s-stack padding="base" gap="base">
<s-text type="strong">Active promotions</s-text>
<s-stack>
<s-text>SAVE10 — 10% off orders over $50</s-text>
<s-text>FREESHIP — Free shipping on all orders</s-text>
</s-stack>
<s-button variant="secondary" command="--hide" commandFor="promo-popover">
Close
</s-button>
</s-stack>
</s-popover>

Anchor to Best practicesBest practices

  • Anchor to the trigger: Position the popover near the element that opens it so buyers understand the relationship between trigger and content.
  • Constrain height for long content: Set maxBlockSize on the popover to cap its height. Wrap overflowing content in a scroll box to make it scrollable.
  • Keep content focused: Limit popovers to a single task or piece of information. For complex interactions, use a modal instead.
  • Avoid placing critical information in a popover: Popovers are hidden until triggered and close when buyers click outside them, making them unsuitable for essential content or actions that require explicit confirmation.
  • Trigger with a clearly labeled button: The button that opens the popover should clearly indicate what'll appear when activated.
  • Group related actions: Contain actions that share a relationship to each other so the popover feels cohesive.
Was this page helpful?