Popovers

DIL source

<box padding={4} gap={4}>
  <title>A little more context.</title>
  <popover>
    <popover-trigger>
      <button variant="outline">Show details</button>
    </popover-trigger>
    <popover-content>
      <box gap={2}>
        <title>Contextual popover</title>
        <text>Supplementary information, without leaving the document.</text>
      </box>
    </popover-content>
  </popover>
</box>

Wrap the trigger button in popover-trigger and the content in popover-content, within one popover. Content supports side="top" or the default bottom, and align="end" or the default center.

Overlays stay inside the renderer’s styling scope, including its ShadowRoot or frame. They support keyboard opening, Escape dismissal, collision handling, and focus restoration. Keep trigger labels meaningful and avoid placing essential information only in a hover interaction.