// Generated by scripts/generate-showcase.mjs. Do not edit directly. page PopoverDetail { layout = "showcase" state playground_open = (ctx.url.searchParams.get("pg_open") ?? "false") === "true" state playground_defaultOpen = (ctx.url.searchParams.get("pg_defaultOpen") ?? "false") === "true" state playground_triggerLabel = ctx.url.searchParams.get("pg_triggerLabel") ?? "Open playground popover" state playground_triggerIcon = ctx.url.searchParams.get("pg_triggerIcon") ?? "" state playground_title = ctx.url.searchParams.get("pg_title") ?? "Popover playground" state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default popover for a modern application." state playground_icon = ctx.url.searchParams.get("pg_icon") ?? "" state playground_placement = ctx.url.searchParams.get("pg_placement") ?? "bottom-start" state playground_width = ctx.url.searchParams.get("pg_width") ?? "md" state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "raised" state playground_showArrow = (ctx.url.searchParams.get("pg_showArrow") ?? "true") === "true" state playground_showClose = (ctx.url.searchParams.get("pg_showClose") ?? "true") === "true" state playground_closeLabel = ctx.url.searchParams.get("pg_closeLabel") ?? "Popover" state playground_closeOnOutside = (ctx.url.searchParams.get("pg_closeOnOutside") ?? "true") === "true" state playground_closeOnEscape = (ctx.url.searchParams.get("pg_closeOnEscape") ?? "true") === "true" state playground_actionLabel = ctx.url.searchParams.get("pg_actionLabel") ?? "Popover" state playground_actionHref = ctx.url.searchParams.get("pg_actionHref") ?? "#popover-demo" state playground_actionIcon = ctx.url.searchParams.get("pg_actionIcon") ?? "" state playground_closeOnAction = (ctx.url.searchParams.get("pg_closeOnAction") ?? "true") === "true" state playground_disabled = (ctx.url.searchParams.get("pg_disabled") ?? "false") === "true" state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" seo { title = "Popover" description = "Display anchored supporting content with configurable trigger, placement, responsive sizing, and open or close events." } view {
Overlays component

Popover

Display anchored supporting content with configurable trigger, placement, responsive sizing, and open or close events.

23 props4 slots4 eventsTheme readyResponsive
Interactive playground

Configure Popover

Change any prop and inspect the server-rendered component immediately.

Live preview

Popover content remains attached to its trigger and becomes mobile-friendly on small screens.

Component code
<Popover
  triggerLabel="Popover"
  title="Popover example"
  description="A polished default popover for a modern application."
  showClose="true"
  closeLabel="Popover"
  actionLabel="Popover"
  actionHref="#popover-demo">
  <div data-slot="trigger">
    <div class="showcase-slot">trigger slot</div>
  </div>
  <div data-slot="header">
    <div class="showcase-slot">header slot</div>
  </div>
  <div data-slot="footer">
    <div class="showcase-slot">footer slot</div>
  </div>
</Popover>
Event outputInteract with the preview to inspect event.detail.
Component props23 controls
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

Recommended

Supporting information

Attach contextual information and actions to a nearby trigger.

01
Live preview

Click the trigger to open the popover

Popover content remains attached to its trigger and becomes mobile-friendly on small screens.

Component usage.wrn
<Popover
  triggerLabel="View details"
  triggerIcon="icon-[lucide--info]"
  title="Verified public information"
  description="This panel can contain text, actions, forms, or custom content."
  icon="icon-[lucide--badge-check]"
  width="lg"
  showClose="true"
  closeLabel="Popover"
  actionLabel="Open guide"
  actionHref="#guide">
  <div data-slot="trigger">
    <div class="showcase-slot">trigger slot</div>
  </div>
  <div data-slot="header">
    <div class="showcase-slot">header slot</div>
  </div>
  <p>Popover content remains attached to its trigger and becomes mobile-friendly on small screens.</p>
  <div data-slot="footer">
    <div class="showcase-slot">footer slot</div>
  </div>
</Popover>
Compact

Compact action popover

Use a small popover for quick actions and concise explanations.

02
Live preview

Click the trigger to open the popover

Component usage.wrn
<Popover
  triggerLabel="Quick actions"
  triggerIcon="icon-[lucide--zap]"
  title="Quick actions"
  description="A compact configuration for dashboards and dense product surfaces."
  icon="icon-[lucide--arrow-right]"
  placement="top"
  width="sm"
  size="sm"
  variant="soft"
  showClose="true"
  closeLabel="Compact example"
  actionLabel="Compact example"
  actionHref="#popover-demo">
  <div data-slot="trigger">
    <div class="showcase-slot">trigger slot</div>
  </div>
  <div data-slot="header">
    <div class="showcase-slot">header slot</div>
  </div>
  <div class="showcase-inline-actions"><button class="showcase-action">Copy</button><button class="showcase-action">Share</button></div>
  <div data-slot="footer">
    <div class="showcase-slot">footer slot</div>
  </div>
</Popover>
Advanced

Rich status popover

Open a wide panel with close control, arrow, custom content, and footer action.

03
Live preview

Click the trigger to open the popover

All systems operationalLast checked moments ago
Component usage.wrn
<Popover
  triggerLabel="Open rich panel"
  title="Service status"
  description="Current operational information."
  icon="icon-[lucide--trash-2]"
  placement="bottom-end"
  width="xl"
  size="lg"
  showClose="true"
  closeLabel="Advanced example"
  actionLabel="Open status page"
  actionHref="#status">
  <div data-slot="trigger">
    <div class="showcase-slot">trigger slot</div>
  </div>
  <div data-slot="header">
    <div class="showcase-slot">header slot</div>
  </div>
  <div class="showcase-status-panel"><strong>All systems operational</strong><span>Last checked moments ago</span></div>
  <div data-slot="footer">
    <div class="showcase-slot">footer slot</div>
  </div>
</Popover>
Component events

Respond to every public interaction

Use declarative @event handlers in .wrn files or subscribe to the bubbling browser events from JavaScript.

@toggleFires when the component changes between open and closed or on and off states.
@openFires after the component opens.
@closeFires after the component closes.
@actionFires when the component's primary or item action is activated.
Declarative handlers.wrn
<Popover
  @toggle='console.log(event.detail)'
  @open='console.log(event.detail)'
  @close='console.log(event.detail)'
  @action='console.log(event.detail)'
/>
Browser listeners.js
const component = document.querySelector("[data-ui-component=\"Popover\"], [data-component=\"Popover\"]")

component?.addEventListener("toggle", (event) => {
  console.log("toggle", event.detail)
})

component?.addEventListener("open", (event) => {
  console.log("open", event.detail)
})

component?.addEventListener("close", (event) => {
  console.log("close", event.detail)
})

component?.addEventListener("action", (event) => {
  console.log("action", event.detail)
})
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
openbooleanfalseNo
defaultOpenbooleanfalseNo
triggerLabelstring"Open popover"No
triggerIconstring""No
titlestring""No
descriptionstring""No
iconstring""No
placementstring"bottom-start"No
widthstring"md"No
sizestring"default"No
colorstring"primary"No
variantstring"raised"No
showArrowbooleantrueNo
showClosebooleanfalseNo
closeLabelstring"Close popover"No
closeOnOutsidebooleantrueNo
closeOnEscapebooleantrueNo
actionLabelstring""No
actionHrefstring""No
actionIconstring""No
closeOnActionbooleantrueNo
disabledbooleanfalseNo
classstring""No
} }