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. Advanced Tutorials

How to Setup a popover

In this section, we'll describe how to use the popover feature

PreviousHow-to Invoke a modal Dialog Box from a Button ClickNextProduct Updates

Last updated 2 years ago

Was this helpful?

Use case: Display a popup based on a user action such as button click, etc.

TL;DR: Here are some high-level steps on how to do this. Look in the next section for detailed instructions:

  1. Create a figma file with a simple button and a popover text field

  2. Sync the component to Quest and setup the Popover feature on the Text field. Add a onClick binding on the Button to invoke the popover

  3. Modify the react hook to control the behavior of the popover

Detailed Instructions: In this example, we’ll demonstrate how to show a popover when the user clicks the button

  1. Create a simple figma component as shown below. All you need is a simple button and a text field will be used for the popover. Below shows the layers and the Figma design:

  1. Sync the above component from Figma to Quest.

  2. In Quest, add the onClick binding for the button and the popover feature for the Textfield as shown below:

    1. Setup onClick binding on the Button. Specify the function to call. This function will be generated in the react hook file for you to modify and add logic for handling the popover

    2. Add the popover feature on the Textfield as shown below:

    3. Download the entire App package

  3. Modify the react hook generated as below:

    1. Specifically, modify the showPopover and closePopover functions to show/hide the Text popover

    import React, {useState} from 'react';
    const useSamplePopover = () => {
      const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null);
      let data: any = {anchorEl};
      const showPopover = (event: React.MouseEvent<HTMLButtonElement>): any => {
        setAnchorEl(event.currentTarget);
      };
      const closePopover = (): any => {
        setAnchorEl(null);
      };
    
      let fns: any = { showPopover, closePopover };
      return { data, fns };
    };
    
    export default useSamplePopover;
  4. Install the dependencies and run the app:

    1. npm i

    2. npm start

  5. You should see the below on your local host:

    1. Click the SHOW POP button and you'll see the popover. You can adjust the anchor position in the popover binding depending on your requirements.