popover
the popover global attribute is used to designate an element as a popover element.
popover elements are hidden viadisplay: noneuntil opened via an invoking/control element (i.e. a<button>or<input type="button" />with a popovertarget attribute) or a HTMLElement.showPopover() call.
When open, popover elements will appear above all other elements in the top layer, and won't be influenced by parent elementspositionoroverflowstyling.
1e.g. drawer
how to close this drawer
you can close the drawer by pressing the esc key,
and you can also be dismissed by selecting outside the drawer area too.
unlike dialog, popover do not deactivate the rest of the page by default.
2e.g. toast
you can be pressed multiple times.
browser support
| chrome | firefox | safari | |
|---|---|---|---|
| popover | 114 | 125 | 17 |
| popovertarget | 114 | 125 | 17 |
| :popover-open | 114 | 125 | 17 |