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

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!

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… 🙂

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 !

I am having this same issue, has there been any updates? I encountered the issue when having essentially a tooltip hover within a tooltip hover (which is probably bad design and not possible for a reason). Here is a recording of the issue, when i hover the tooltip because i have the mouseleave close overlay on the initial overlay you can’t hover the tooltip

i tried to upload a video of it but it wouldn’t let me

Hey @jo.windley, thank you for reaching out!

I’ve mentioned in my previous reply that this is a this is unfortunately a feature limitation.

Please feel free to DM me the video and let me know under this post that you’ve DM’ed me.

Have you tried to use a single While hovering trigger, instead of two separate mouse enter and mouse leave triggers. This way you don’t actually have to configure a close overlay transition, as it will disappear when you remove your mouse.

Hi there!
Would it be possible to add a delay option to the “While hovering” trigger? In my case, the only reason I need to use “Mouse enter” instead of “While hovering” is to use the delay feature that “Mouse enter” allows.
It is very common for hovering interactions to have a delay. For example, most tooltips don’t appear instantly when a user hovers over an icon; they often have a brief delay.

Thanks in advance!

A very common use case is to have information popovers or tooltips as long as the user hovers e.g. an icon button. They appear after a short delay and disappear after the user leaves with the mouse the dedicated button.

I am currently building a prototype and somehow the while hovering action is not working for me because the tooltip / popover overlay is not disappearing when the mouse leaves the control (I thought this was working in an earlier prototype?).
And via mouse enter / leave there is the delay function possible, but also not closing the overlay because, as you described above, it measures the mouse leave on the appearing overlay which covers the whole screen, instead of the selected component I want to add the interaction. I do not understand why, because if I want to have the mouse leave on the overlay I could defined it on that component. But the user is not required to enter the tooltip with the mouse over, they just go ahead with the cursor on the screen. It is also not closing after time or by clicking…

I was wondering why that common pattern is not possible to show in a prototype. Or I did something wrong?

For sure the tooltip could be part of the actual component and state changes, but in my case I reuse a control and want to add the tooltip.

While writing this I had figured out a workaround. Using the given button and adding the tooltip in an auto layout container, making the tooltip component absolute positioned and make a component with mouse enter and leave actions to have the delay working. This works now for me. Hover was also working but not with the delay. The only thing is that they are not positioned above everything and I needed to change some orders and clippings of layers.

Best regards
Chris

In my case, I’ve created a hidden bottom bar, which appears when I get the pointer next to it. I’ve used a mouser entre trigger and a “navigation to” option in the prototype to change the hidden botton bar to a frame with the full version of it. And I’ve used mouse leave to return to the hidden version.

What happens to me is the opposite. When I click in one of the buttons in the bottom bar, it would open an overlay, but, as the button is inside the frame with the mouse leave trigger, it opens and closes the overlay immediatly.