Generate native HTML popovers — popover="auto" | "manual" | "hint", popovertarget triggers, anchor positioning, ::backdrop styling, and @starting-style entry animation. Zero JS required for show/hide, but a programmatic .showPopover() example is included too.
popover support…Anchor positioning needs anchor-name + position-anchor support (Chrome 125+, Edge 125+). Falls back to position: fixed centered otherwise.
| Type | Light-dismiss | Esc closes | Stacks | Use for |
|---|---|---|---|---|
auto (default) | Yes — click outside closes. | Yes. | Closes peers in the same stack. | Menus, dialogs, picker UIs. |
manual | No. | No. | Independent — many can be open. | Toasts, persistent panels. |
hint | Yes. | Yes. | Separate "hint stack" — closes other hints but not autos. | Tooltips, hover help. |
| Method / event | What |
|---|---|
el.showPopover() | Open it. |
el.hidePopover() | Close it. |
el.togglePopover(force?) | Toggle, with optional forced state. |
el.matches(':popover-open') | Is it open? |
beforetoggle | Cancellable event before state changes (.newState = 'open' / 'closed'). |
toggle | Fires after the state has changed. |
anchor-name, position-anchor, anchor()): Chrome 125+, Edge 125+. Use @supports (anchor-name: --a) to gate.@starting-style for entry animation: Chrome 117+, Safari 17.5+, Firefox 129+.