Popover
Top-layer supplemental content built on the Popover API.
Canonical sourcepatterns/popover.html
Behavior ownerNative HTML
Runtime inside FormaNone
Example 1
Canonical
Canonical repository markup, namespaced only to keep examples independent.
Options
This surface is controlled entirely by declarative HTML.
View HTML
<button type="button" popovertarget="ex1-popover-example-popover">Show options</button>
<div class="ef-popover" id="ex1-popover-example-popover" popover>
<strong>Options</strong>
<p>This surface is controlled entirely by declarative HTML.</p>
<button type="button" popovertarget="ex1-popover-example-popover" popovertargetaction="hide">Close</button>
</div>Example 2
Secondary surface
The same contract demonstrated on a secondary Forma surface.
Options
This surface is controlled entirely by declarative HTML.
View HTML
<button type="button" popovertarget="ex2-popover-example-popover">Show options</button>
<div class="ef-popover" id="ex2-popover-example-popover" popover>
<strong>Options</strong>
<p>This surface is controlled entirely by declarative HTML.</p>
<button type="button" popovertarget="ex2-popover-example-popover" popovertargetaction="hide">Close</button>
</div>Example 3
Constrained layout
The canonical contract inside a narrow application region.
Options
This surface is controlled entirely by declarative HTML.
View HTML
<button type="button" popovertarget="ex3-popover-example-popover">Show options</button>
<div class="ef-popover" id="ex3-popover-example-popover" popover>
<strong>Options</strong>
<p>This surface is controlled entirely by declarative HTML.</p>
<button type="button" popovertarget="ex3-popover-example-popover" popovertargetaction="hide">Close</button>
</div>