Skip to main content

Update for a workaround on 2021-08-18T04:00:00Z:


I found a solution that works pretty well. Take my example below:



  1. On the tooltip overlay, add another interaction that is Mouse Leave → Close overlay

  2. After all overlays have been closed (including the dialog that opens from the tooltip), as long as your mouse is outside the target area from where the tooltip came from, it will all close!


Try that out, see if it works for you 🙂




Original post:

Hi, this is a use case I’ve had to find many ways to try and address, but never a good solution.


If I have an overlay, open another overlay, I would like a way to have the previous overlays close. In my example, the typical use case is a tooltip that gets shown on Hover, which opens another overlay like a menu. From that menu, I might open a dialog.


Unfortunately, the previous overlays stay stuck on the screen until I close all of them manually. Is there a solution in terms of prototype triggers/interactions that can solve the issue of the tooltip and menu (previous overlays) from doing this?


Would Interactive Components solve this issue? I get that you can bake-in interactions, the issue is with getting the prototype to understand the Close Overlay. I’ve even added Close Overlay on Mouse Leave, and that doesn’t make them go away after I open the next overlay.


See my video attached, thanks.




Did you try to use Navigate to Frame, instead of Close Overlay?


Did you try to use Navigate to Frame, instead of Close Overlay?



What frame would I navigate to? There is a “hacky” work around where I can duplicate the base screen/frame I start from, and point to that I guess. But that doesn’t solve the issue of the tooltip and the menu from staying visible. I don’t want to have to use a screen/frame for every interaction like these. Again, I know that Interactive Components will help solve some of this, but not all.

Is not exactly what I said in my last message, but here is a possible solution:

Figma – 9 Apr 21

Sorry for the late reply. Can I get edit access to the file to see this in more detail? You can put it in your Drafts to keep it in a safe place, and not worry about permissions then. Thanks for the example!

You should be able to duplicate the file even if you have view only access. 🤔


Anyway, I changed the access. 😊

Thanks! It was pointing directly to the prototype, not the file.

Okay, your Solution #1 is really interesting and clever, with the transparent frame background! I’ll keep that in mind. It still doesn’t solve the limitation I believe, but this is a potential way of solving it. Thanks again!


P.S. Going to keep this post open in case anyone else from @figma can answer.

There are also other solutions, but is a bit tricky without knowing the layer structures you used.

It’s basically what you had. Main frame/screen with the UI, button in that frame points to an overlay, object in the first overlay opens a second overlay.

I am facing the same problem. Can any one help me it this ?

I found a solution that works pretty well. Take my example on my original post:



  1. On the tooltip overlay, add another interaction that is Mouse Leave → Close overlay

  2. After all overlays have been closed (including the dialog that opens from the tooltip), as long as your mouse is outside the target area from where the tooltip came from, it will all close!


Try that out, see if it works for you 🙂

I tried this but its not working for me.

this works for me, thanks!

This is still not working for me… Can you please share the figma file to see the prototype links?


Sorry I do not work there anymore, and don’t have access to that file. Did you follow my instructions here?

Hi @megaroeny I’ve tried to follow your instruction, but it doesn’t work for me either.


@Ghanesh_R.S did you manage to make it work?

I did the bold thing and made feature request for it 🙋



Close all overlays en open target overlay

Terms & ConditionsCookie settings