Skip to main content

Popover

The popover component displays contextual content in an overlay triggered by a button using the commandFor attribute. 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.

Support
Targets (24)

Supported targets

  • customer-account.footer.render-after
  • customer-account.order-index.announcement.render
  • customer-account.order-index.block.render
  • customer-account.order-status.announcement.render
  • customer-account.order-status.block.render
  • customer-account.order-status.cart-line-item.render-after
  • customer-account.order-status.cart-line-list.render-after
  • customer-account.order-status.customer-information.render-after
  • customer-account.order-status.fulfillment-details.render-after
  • customer-account.order-status.payment-details.render-after
  • customer-account.order-status.return-details.render-after
  • customer-account.order-status.unfulfilled-items.render-after
  • customer-account.order.action.menu-item.render
  • customer-account.order.action.render
  • customer-account.order.page.render
  • customer-account.page.render
  • customer-account.profile.addresses.render-after
  • customer-account.profile.announcement.render
  • customer-account.profile.block.render
  • customer-account.profile.company-details.render-after
  • customer-account.profile.company-location-addresses.render-after
  • customer-account.profile.company-location-payment.render-after
  • customer-account.profile.company-location-staff.render-after
  • customer-account.profile.payment.render-after

Anchor to propertiesProperties

Anchor to blockSize
blockSize
Default: 'auto'

Adjust the block size.

Anchor to id
id
string

A unique identifier for the element.

Anchor to inlineSize
inlineSize
Default: 'auto'

Adjust the inline size.

Anchor to maxBlockSize
maxBlockSize
Default: 'none'

Adjust the maximum block size.

Anchor to maxInlineSize
maxInlineSize
Default: 'none'

Adjust the maximum inline size.

Anchor to minBlockSize
minBlockSize
Default: '0'

Adjust the minimum block size.

Anchor to minInlineSize
minInlineSize
Default: '0'

Adjust the minimum inline size.

Anchor to eventsEvents

Learn more about registering events.

Anchor to hide
hide
<typeof tagName>

Callback fired after the overlay is hidden.

Anchor to show
show
<typeof tagName>

Callback fired after the overlay is shown.

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

Was this page helpful?