StellarUI

<stellar-popover>

anchored popover for interactive content that opens from an anchor click.

Properties

Component

Example

Preview

Popover title

This surface can hold interactive controls, not just passive help text.

Cancel

Continue

Markup

Copy

<button
  id="popover-demo-anchor"
  type="button"
>
  Open popover
</button>
<stellar-popover for="popover-demo-anchor">
  <div style="display:grid;gap:0.75rem;">
    <div style="display:grid;gap:0.35rem;">
      <strong>Popover title</strong>
      <p style="margin:0;">This surface can hold interactive controls.</p>
    </div>
    <div style="display:flex;gap:0.5rem;justify-content:flex-end;">
      <button type="button" data-popover="close">Cancel</button>
      <button type="button">Continue</button>
    </div>
  </div>
</stellar-popover>

API

Complete props, events, slots, and implementation notes for the shipped popover.

Props

Prop	Type	Default	Notes
`for`	`string`	`''`	ID of the anchor element that toggles and positions the popover.
`open`	`boolean`	`false`	Shows or hides the popover. The component also mutates this prop when the anchor is clicked or dismissal occurs.
`placement`	`top \| top-start \| top-end \| bottom \| bottom-start \| bottom-end \| right \| right-start \| right-end \| left \| left-start \| left-end`	`top`	Preferred anchored placement. The component flips to the opposite side when the preferred side overflows more.
`distance`	`number`	`8`	Main-axis gap between the anchor and the popover surface.
`offset`	`number`	`0`	Cross-axis slide along the anchor edge.
`without-arrow`	`boolean`	`false`	Hides the arrow while keeping the same anchored open/close behavior.

Events

Event	Source	Notes
`before-open`	`stellar-popover`	Cancelable event emitted right before the popover opens.
`open`	`stellar-popover`	Emitted after the popover opens.
`before-close`	`stellar-popover`	Cancelable event emitted right before the popover closes.
`close`	`stellar-popover`	Emitted after the popover closes.

Slots

Slot	Notes
default	Popover body content. Interactive controls are allowed here, unlike `stellar-tooltip`.

Notes

The public tag is `stellar-popover`, anchored to another element by its `for` id and toggled by clicking that anchor.
Unlike `stellar-tooltip`, the default slot may contain interactive controls. The demo keeps the anchor label and body copy in `Example Properties` because they are authored children, not component props.
The component emits cancelable `before-open` and `before-close` events, then `open` and `close` after the state change lands.
Clicks outside the popover close it, Escape closes it and returns focus to the anchor, and `[data-popover='close']` gives authored content an explicit dismiss affordance.
`placement`, `distance`, and `offset` follow the shipped anchored-surface contract, while the implementation stays local and native to Rocket instead of pulling in Floating UI just for this port.
Only one popover stays open at a time unless it is an ancestor of the newly opened one, matching the shipped nested popover behavior.