Popover
Material Design 3-styled popover web component (lit-material-popover) — richer, click-triggered overlay content, distinct from the tooltip.
- 2.0 KB gzipped
- @lit-material/popover 0.0.3
- Renders on the server
Example
Popover
A richer, click-triggered overlay — a title, body content, and optional footer actions — distinct from the tooltip.
Install
npm install @lit-material/popover @lit-material/tokensimport "@lit-material/popover";Link @lit-material/tokens/css/index.css once per page for the colour, type and shape tokens. Install guide
API
<lit-material-popover>
A richer, click-triggered overlay — a title, body content (arbitrary
HTML, not just plain text), and optional footer actions — anchored to a
trigger element. Distinct from lit-material-tooltip: that's
hover/focus-triggered, plain text, and never gets a close button or
interactive content of its own; this is deliberately closer to
lit-material-menu's foundation (native Popover API, popover="auto"
so outside-click/Escape light-dismiss come from the browser) than to
tooltip's manual popover.
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
open | open | boolean | false | |
anchor | anchor | string | undefined | none | id of the trigger element to position and return focus to. See also anchorElement. |
dismissible | dismissible | boolean | true | Shows a close button in the header. |
anchorElement | property only | HTMLElement | undefined | none | The element the popover is positioned against and returns focus to on close. |
Events
| Event | Description |
|---|---|
close | Fires after the popover closes, for any reason (the close button, close(), Escape, or an outside click). |
Slots
| Slot | Description |
|---|---|
header | Optional heading, next to the close button. Slot exactly one element. |
| default | The popover's body content. |
footer | Optional footer actions. For more than one, wrap them in a single element yourself so they end up in one row. |
CSS parts
| Part | Description |
|---|---|
popover | The popover surface (background, padding, shape, elevation). |
header | The header row. Always rendered; see dismissible. |
close | The close button. Only rendered when dismissible. |
content | The body content container. |