Components
Popover
Floating panel anchored to a trigger element
Popover
Basic
Positioning
Without arrow
Floating popover
Draggable variant that can be repositioned by the user.
Draggable
Semantic colors
The arrow tip fills with elevated to match the panel. Its stroke is
popover-border; an arrow on the panel's top edge uses
popover-border-highlight instead, so the edge that catches the light
carries the same highlight treatment as the panel itself.
| Light | Dark | |||||||
|---|---|---|---|---|---|---|---|---|
| Shade | Alpha | ×C | Shade | Alpha | ×C | |||
| Popover | ||||||||
| popover-border | 10 | 0.12 | 1 | 10 | 0.2 | 1 | ||
| popover-border-highlight | 10 | 0.12 | 1 | 10 | 0.4 | 1 | ||