Overlays component

Popover

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

23 props4 slots4 outputsTheme readyResponsive

Interactive playground

Configure Popover

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

Live preview

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 the typed payload.

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.

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.

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.

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 outputs

Receive every typed component output

Use declarative output handlers in .wrn files or register a direct output handler from JavaScript. The canonical API exposes payload and does not require event.detail.

@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(payload)'
  @open='console.log(payload)'
  @close='console.log(payload)'
  @action='console.log(payload)'
/>

Direct output handlers.js

import { registerOutputHandler } from "@wrnexus/csr/outputs"

const component = document.querySelector("[data-ui-component=\"Popover\"], [data-component=\"Popover\"]")

if (component) registerOutputHandler(component, "toggle", (payload) => {
  console.log("toggle", payload)
})

if (component) registerOutputHandler(component, "open", (payload) => {
  console.log("open", payload)
})

if (component) registerOutputHandler(component, "close", (payload) => {
  console.log("close", payload)
})

if (component) registerOutputHandler(component, "action", (payload) => {
  console.log("action", payload)
})

Component API

Props and configuration

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

Prop	Type	Default	Required
`open`	boolean	`false`	No
`defaultOpen`	boolean	`false`	No
`triggerLabel`	string	`"Open popover"`	No
`triggerIcon`	string	`""`	No
`title`	string	`""`	No
`description`	string	`""`	No
`icon`	string	`""`	No
`placement`	string	`"bottom-start"`	No
`width`	string	`"md"`	No
`size`	string	`"default"`	No
`color`	string	`"primary"`	No
`variant`	string	`"raised"`	No
`showArrow`	boolean	`true`	No
`showClose`	boolean	`false`	No
`closeLabel`	string	`"Close popover"`	No
`closeOnOutside`	boolean	`true`	No
`closeOnEscape`	boolean	`true`	No
`actionLabel`	string	`""`	No
`actionHref`	string	`""`	No
`actionIcon`	string	`""`	No
`closeOnAction`	boolean	`true`	No
`disabled`	boolean	`false`	No
`class`	string	`""`	No