SPopover <s-popover>

Floating content anchored to the button that opens it. SPopover is the typed Vue 3 wrapper for Shopify's Polaris <s-popover> web component.

import { SPopover } from 'polaris-vue-elements'

Best practices

• Keep it for secondary content. A popover stays hidden until merchants open it, so put less important information and actions there, not anything they need to see right away.
• Group related actions. The actions inside a popover should belong together.
• Open it from a clearly labeled button. Trigger the popover with a default or variant="tertiary" SButton whose label says what's inside.

See Shopify's best practices for <s-popover> for the full guidance.

Example

Toggle popoverPopover content, opened via commandFor/command on the button above.

<script setup>
import { SButton, SPopover, SText } from 'polaris-vue-elements'
</script>

<template>
  <!-- Same declarative pattern as SModal: a trigger button's commandFor points
       at the popover's id, command controls the action ("--toggle" here). -->
  <SButton commandFor="example-popover" command="--toggle">Toggle popover</SButton>

  <SPopover id="example-popover">
    <SText>Popover content, opened via commandFor/command on the button above.</SText>
  </SPopover>
</template>

Props

Prop	Type	Description
blockSize	"auto" | "0"	Adjust the block size.
inlineSize	"auto" | "0"	Adjust the inline size.
maxBlockSize	"none" | "0"	Adjust the maximum block size.
maxInlineSize	"none" | "0"	Adjust the maximum inline size.
minBlockSize	"0"	Adjust the minimum block size.
minInlineSize	"0"	Adjust the minimum inline size.

Events

Event	Type
afterhide	CustomEvent
aftershow	CustomEvent
aftertoggle	Event
hide	CustomEvent
show	CustomEvent
toggle	Event

Listen for these with @afterhide-style listeners on <SPopover>.

Slots

Slot	Description
default	The content displayed within the popover, which appears in an overlay positioned relative to its trigger element. Typically contains menus, action lists, or supplementary information.