Popover
Any element with the popover attribute, opened by a button with popovertarget. No JavaScript.
The popover fades in over the page, centered by default. Clicking outside or pressing Esc closes it.
Popover
Click outside or press Esc to close.
Placement
data-placement anchors the popover to its button: bottom,
top, left or right. It flips to the other
side when there is no room. Browsers without anchor positioning keep it centered.
Below the button
Above the button
Before the button
After the button
Older browsers
Browsers without the Popover API show the content in place, as normal page content.
Related
The navbar menu and the toast are popovers too. For a short label on hover, use a tooltip.
Variables
| Variable | Default |
|---|---|
--i-popover-max-width | 20rem |
--i-popover-offsetGap between an anchored popover and the button that opens it | calc(var(--i-spacing) * 0.25) |
--i-popover-duration | var(--i-duration) |
--i-popover-color-background | var(--i-dropdown-color-background) |
--i-popover-color-border | var(--i-dropdown-color-border) |
--i-popover-shadow | var(--i-dropdown-shadow) |
--i-popover-color-text | var(--i-dropdown-color-text) |