LogoLogo
Quest HomeSign Up
  • 😀Welcome to Quest
  • Getting Started
    • Quest Overview
    • Helpful Resources
    • Quick Start - Build your first component from Figma
    • Quick Start - Build your first component from a Wireframe
    • AI Prompt
  • Fundamentals
    • Customizing & Using the UI Kit
    • Designing Custom Components in Figma
    • Easily Sync Designs without Losing Work
    • Setting Up Props & Bindings
    • Exporting Code
    • Push to your Repository
    • Creating Responsive Components
    • Nesting Components
    • Workspaces & Apps
    • Code & Preview Mode
    • Prototypes/Wireframes
    • Animations - build with React Spring
    • Quest plugin for Figma Dev Mode
    • Publish on Quest to a URL
  • Features
    • Working with Variants & States
    • Naming Conventions
    • Previewing with Custom Fonts
    • Light & Dark Mode
    • Creating a custom Tooltip
    • Creating a Floating Popover
    • Creating a Dialog pop-up
    • Radio Group
    • Using the MUI Data Grid & Table
    • Data & List Bindings
    • Dynamic Bindings
    • Grid
    • File Upload
    • Design System Tab and Theme Import
    • How-to use a Theme in your Application
    • Accessibility Support
    • Design Tips and Tricks
    • Video
    • Lazy Loading
    • Sticky Position
    • Link
    • Custom Breakpoints
    • Min / Max Width
    • Supported Quest UI Kit Components & How-to Make Edits in Figma
    • Supported Chakra Components & How-to Make Edits in Figma
  • Advanced Tutorials
    • Setting up Bindings and Features on the MUI Button
    • Display Repeating Components based on a Dynamic List
    • How-to Pass Values from Parent to Nested Components
    • How-to Invoke a modal Dialog Box from a Button Click
    • How to Setup a popover
  • 🔍Help
    • Product Updates
    • FAQs
    • Plugin Warnings / Alerts
  • 💡Support
    • Why does my design look different in Quest than Figma?
    • Can I keep making changes in Figma without affecting code?
    • What are some best practices?
    • Does Quest support more than Figma and React?
    • How do I manage users?
    • What is the refund process?
    • How do I get in touch with Quest?
    • Do I have to use MUI if I'm using Quest?
Powered by GitBook
On this page

Was this helpful?

  1. Features

Creating a Floating Popover

PreviousCreating a custom TooltipNextCreating a Dialog pop-up

Last updated 1 year ago

Was this helpful?

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.

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 section

https://mui.com/components/popover/
How to Setup a popover