Creating a Floating Popover

Currently, this feature only works when your App is using the MUI library.

You can easily add a Popover based on user input such as a click. You’ll first want to decide what that popover is as it can be any custom component. It will be positioned relative to the component the user interacted with so you’ll want to add the Popover feature to the component that will launch it. First we’ll give an example of a popover design and then we’ll show how to add the feature to launch it on a part of a custom component.

A popover is simply a floating element that is used to display something over other elements. This is useful for contextual information or feedback to the user in places where you don’t want to shift your layout.

An example of this might be a feedback popover that alerts the user to a message and asks them to take additional action. In the example above, after a user clicks the thumbs down button, the popover will appear above the feedback component.

In Figma, you will need to have this Popover be a part of the component that you want to use to launch it. This doesn’t need to be in an Auto layout or even in the exact correct position but simply just be inside the component you’re using as you will set up the placement for the Popover inside the feature in Quest.

For the Popover feature settings, it is best to first refer to this MUI documentation.

https://mui.com/components/popover/

Once in Quest, Anchor EL will tell you which element the popover will be anchored to. In this case, it will float on top of the feedback bar.

For detailed instructions on how to use the Popover feature in Quest, please review the How to Setup a popover section