Variants
| Class | Example |
|---|---|
| .mdst-popover | |
| .mdst-popover--sm | |
| .mdst-popover--lg | |
| .mdst-popover--anchored |
Attributes
| Attribute | Description |
|---|---|
| popover | Auto-dismiss popover (closes on outside click or ESC) |
| popover="manual" | Manual popover (requires explicit close) |
| anchor="id" | Anchors popover to an element (use with --anchored) |
Usage
<!-- Basic popover -->
<button popovertarget="my-popover">Toggle Popover</button>
<div id="my-popover" class="mdst-popover" popover>
<p>Popover content</p>
</div>
<!-- Anchored popover -->
<button id="trigger" popovertarget="anchored">Open Menu</button>
<div id="anchored" class="mdst-popover mdst-popover--anchored" popover anchor="trigger">
<p>Anchored below the button</p>
</div>
<!-- Manual popover -->
<div id="manual" class="mdst-popover" popover="manual">
<p>Won't close on outside click</p>
</div>This is a default popover. Click outside or press ESC to close.
Compact popover
Large Popover
This is a larger popover with more room for content.