Aligning and Positioning
The Popup enables you to align it to components and absolute points as well as to control its position and render a margin.
Aligning to Components
To align the Popup to a specific component, use the anchor property binding. The Popup opens next to the defined anchor component.
If an
anchoris not provided, the Popup will use theoffsetproperty value.
Aligning to Absolute Points
To align the Popup to a specific absolute point that is relative to the document, use the offset property binding. The Popup opens next to the point and uses the specified popupAlign configuration.
Adding a Margin
The Popup adds the margin value to the popup dimensions in pixels and leaves a blank space between the popup and the anchor.
Positioning
Precise positioning lets you adapt the Popup to different UI patterns—a dropdown menu that opens below its trigger, a tooltip that appears to the right of an icon, or a context menu that anchors to the cursor position.
Use anchorAlign to pick which point on the anchor the Popup attaches to. Use popupAlign to pick which point on the Popup connects to that anchor point. Both properties accept an { horizontal, vertical } object:
| Key | Accepted values |
|---|---|
horizontal | 'left', 'center', 'right' |
vertical | 'top', 'center', 'bottom' |
The following demo lets you interactively explore all alignment combinations. Use the configuration panel at the top right corner of the demo.