Popover

Non-modal floating content triggered by click.

Usage

<w-popover>
  <w-slot trigger><button>More info</button></w-slot>
  <w-slot body>
    <div>
      <h3>Details</h3>
      <p>Additional information here.</p>
    </div>
  </w-slot>
</w-popover>

Props

Prop	Type	Default	Description
open	boolean	false	Whether popover is visible
placement	string	"bottom"	Position relative to trigger
persistent	boolean	false	Prevent closing via Escape or outside click
close-on-outside-click	boolean	true	Close when clicking outside
close-on-escape	boolean	true	Close on Escape key
portal	boolean	true	Teleport to body

Slots

Slot	Element	Description
trigger	Button	Element that opens the popover
content	Any	Popover content
close	Button	Optional close button

Events

Event	Description
open	Fired when popover opens
close	Fired when popover closes

Methods

Method	Description
show()	Open the popover
hide()	Close the popover
toggle(force?)	Toggle open state

Keyboard

Key	Action
Enter / Space	Toggle popover (on trigger)
Escape	Close popover

Examples

Persistent Popover

A persistent popover stays open until explicitly closed.

<w-popover persistent>
  <w-slot trigger><button>Edit Settings</button></w-slot>
  <w-slot body>
    <div>
      <h3>Settings</h3>
      <input type="text" placeholder="Name" />
      <button onclick="this.closest('w-popover').open = false">Save</button>
    </div>
  </w-slot>
</w-popover>

Styling

When open the body is teleported to the portal and positioned by autoPosition. Target it via role. The popover host is display: contents, so it doesn't affect surrounding layout.

/* Popover body */
[role="dialog"]:not([aria-modal="true"]) {
  background: white;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 1rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  min-width: 200px;
}

/* Trigger expanded state */
w-popover w-slot[trigger] > *[aria-expanded="true"] {
  background: #eef2ff;
}

Selector	Targets
[role="dialog"]:not([aria-modal="true"])	Popover/non-modal content
w-popover[open]	Host while open
w-popover w-slot[trigger] > *[aria-expanded="true"]	Active trigger

Accessibility

• Trigger has aria-haspopup and aria-expanded
• Content has aria-label or aria-labelledby
• Focus management without full trapping