Popover

See it working

The syntax

<button popovertarget="menu">Options</button>
<div id="menu" popover>…</div>

Edit the demo’s CSS

This is the stylesheet running the demo above. Change a value and watch it. Break it on purpose: delete the modern line and you are looking at the fallback.

The demo’s CSS, editable .dm-pop { display: grid; place-items: center; min-height: 110px; } .dm-pop-btn { font: inherit; font-weight: 700; font-size: 14px; padding: 11px 18px; border: 0; border-radius: 10px; background: #0a0a0f; color: #fff; cursor: pointer; } .dm-pop-menu { max-width: 280px; padding: 16px; border: 1px solid #c9cdd8; border-radius: 12px; background: #fff; color: #1c1f2a; box-shadow: 0 24px 60px rgba(10,10,15,.22); } .dm-pop-menu b { font-size: 15px; } .dm-pop-menu p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.5; } .dm-pop-menu::backdrop { background: rgba(10,10,15,.25); }

ResetCopy

For browsers without it

A browser without it shows the popover element inline as ordinary content, so hide it with [popover]:not(:popover-open) only inside a support check, or the menu becomes unreachable instead of merely always visible.