Popover
A non-modal panel anchored to a trigger.
<mm-popover label="Column options">
<mm-button slot="trigger" variant="secondary" icon="view-column">Columns</mm-button>
<mm-checkbox checked label="Owner"></mm-checkbox>
<mm-checkbox checked label="Rows"></mm-checkbox>
</mm-popover>
<!-- Or point at a trigger elsewhere; place the popover right after it so Tab reaches the content. -->
<mm-button id="share" variant="secondary" icon="share">Share</mm-button>
<mm-popover for="share" label="Share orders_daily">…</mm-popover>
Guidance
Popovers hold a small piece of interactive content next to its trigger: a filter form, column
options, a share list. The panel is a raised layer (mm-raised, radius-md, shadow-float)
with square, simple edges and no arrow, positioned against the trigger and flipped to stay on
screen. It uses the native popover="auto" attribute, so it sits in the top layer, a click
outside closes it, and only one auto popover is open at a time.
Wrap the trigger in the trigger slot, or point for at the id of a trigger in the same
document or shadow root, or set anchor to an element. The trigger toggles the popover and
carries aria-expanded. Escape closes it and returns focus to the trigger; Tab moves through
the content in document order (place a for popover straight after its trigger) and leaving it
closes the popover. It is non-modal: focus stays on the trigger unless something inside has
autofocus. Give it a label to expose the panel as a named, non-modal dialog. It fades over
--mm-dur-menu, and appears instantly when opened from the keyboard.
Pattern: https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
htmlFor | for | string | '' | The id of the trigger, in the same document or shadow root. |
anchor | HTMLElement | null | null | The trigger element, when it cannot be referenced by id. | |
placement | placement | Placement | 'bottom-start' | Floating UI placement against the trigger. |
offset | offset | number | 4 | Gap between the trigger and the panel, in pixels. |
matchWidth | match-width | boolean | false | Makes the panel at least as wide as the trigger. |
open | open | boolean | false | Opens and closes the popover. Reflects. |
label | label | string | '' | Names the panel, which is then exposed as a non-modal dialog. |
trigger | HTMLElement | null | The element that toggles the popover. |
Events
| Event | Detail | Description |
|---|---|---|
mm-toggle | CustomEvent<PopoverToggleDetail> | The popover opened or closed. |
Slots
| Slot | Description |
|---|---|
| Default | The content. |
trigger | The element that toggles the popover. |
CSS parts
| Part | Description |
|---|---|
panel | The floating panel. |
CSS custom properties
| Property | Description |
|---|---|
--mm-popover-padding | Panel padding. Defaults to --space-4. |
--mm-popover-min-width | Minimum width. Defaults to 200px. |
--mm-popover-max-width | Maximum width. Defaults to 360px. |
Examples
Every state of mm-popover in Storybook, with keyboard and screen reader tests.