Open overlay on mouse enter with delay, close on mouse leave from component and overlay both

Hello all,
Struggling a bit to achieve a very common pattern on the web with overlays (popovers).

  1. Let’s say there is component X (button for example), that when mouse entered and stayed hover for a certain time (let’s say 250ms), an overlay should open from that component (let’s say a menu). That is achievable in Figma today using mouse enter > open overlay (but delay is unsupported unfortunately).
  2. Now on the web, the user expects the overlay to close when they either move the mouse out of the original component and NOT over the overlay, from the overlay to outside of it, or if they click something inside the overlay menu.

This seems not possible to do achieve in Figma, or am I missing something ?

I can activate “close on click outside” on the overlay, fine, but it’s not the same…
I can add a close overlay when mouse leaves but I have to add this on the overlay itself, not the original component, and I don’t find a way to also close overlay if mouse moves away from component X.

In addition, I want to use this same overlay to open from many different instances of component X …

Could someone help please ?

Hey @Alexandre_Istrasoft, thank you for reaching out!

I have reproduced this interaction on my end and I am also not able to find out how to close the overlay when the mouse leaves the button component. (It works when the mouse leaves the overlay like you mentioned)I tried to add a second interaction to the Button component Mouse leave - close overlay, but this seems not to work.

Let me ask internally if this is intended and if so I will try to find some workarounds. I’ll get back to you soon.

Meanwhile could you clarify this further for me “I want to use this same overlay to open from many different instances of component X”.

Appreciate your patience!

1 Like

Thanks a lot for the quick reply and even test video, wow !
Indeed it’s quite a common pattern on the web for all kinds of menus/popovers etc so it would be great for it to work seamlessly in Figma.
“I want to use this same overlay to open from many different instances of component X” > I mean that in my situation as well as on the web, there is often several source components (buttons) on the same screen that need this generic behaviour.

@Alexandre_Istrasoft Thank for clarifying! So I’ve got an update, this is unfortunately a feature limitation. The close overlay is an interaction intended to be applied to the overlay frame itself (use case of a confirmation button on an overlay modal automatically closes the overlay and brings you back to the original page).
All overlays cover the whole screen, no matter how they appear, and so the ‘mouse leave’ doesn’t work, because the overlay is blocking that detection, so you’ll need to apply this ‘mouse leave’ to the overlay.

If you don’t mind sharing your designs here in the Forum (screen recording or screen shots) and I can ask our Designer advocates if they have any suggestion to use different steps to achieve a similar effect?

Alternatively I can change this topic from “Ask the community” to “Share an Idea”. This helps us roadmap future updates. Community members who would like to see your suggestion implemented can vote on it.

Please let me know how you’d like to proceed and if you have any further questions, happy to help!

thanks a lot fore the support and explanation !
It’s a bit cumbersome right now for me to extract the design and share it but I’ll do it once I come across this again. The use case is obvious I think as on the web many overlays behave just like that. As for changing to “Share an idea”, it’s unfortunately the best way for the idea to die very quickly as it gets closed if no one replies within a month… :slight_smile:

I totally understand your point! I’ll make sure to share your feedback internally with the teams.

thanks ! it’s the first time for me that someone from Figma actually replies to a question and so fast and efficiently, so thank you !

1 Like