Popover
A Popover is a transient component that shows when the user clicks something with an On Click event handler, such as a Button. A Popover follows the rules of modality, which renders a temporary context to get the user’s attention. The Popover component is only an empty container, able to hold any other UI Component.
Appearance
Show Backdrop
Add a dark overlay colour to the backdrop / background when the popover is open.
Anchor Origin
The point on the anchor component where the Popover will attach to.
Transform Origin
The point on the Popover that will attach to the anchor component.
Event Handlers
On Close
Run an action when the popover is closed. I.e. when having a popover open and you click outside it, the popover is closed and the On Close event handler is triggered.
Placement in the UI
You can place the Popover anywhere in the view, as long as it is not inside a hidden part of the UI. The Popover will open relative to the currently clicked component as an anchor when opened from an App. You may have several Buttons in a View, opening the same Popover when clicked.
You may offset the placement of the Popover by setting the margin in the Property Pane Styles section.
Toggle a Popover design time
The Popover is automatically opened in the UI Designer if a child component is selected in the Application Views section. You may also expand/collapse a Popover design time to reveal its content by clicking Expand/Collapse on the placeholder representing the design time placement of the Popover.
Open a Popover from an App
The Popover is opened by using the Open Popover Action Node
Close a Popover from an App
The Popover is closed by clicking outside of the popover when it's open or by using the Close Popover Action Node.
Warning when copying popovers
If you make a copy of your popover, a new popover is actually created, but with the same name. Please make sure to rename the copied popover and create new actions for opening or closing this new popover.
Last updated
Was this helpful?