Hello all, Struggling a bit to achieve a very common pattern on the web with overlays (popovers). 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). 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 ?

Question

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

Forum|Forum|2 years ago
February 5, 2024
11 replies
2760 views

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

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).
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 ?

Ask the community

This topic has been closed for replies.

Show previous replies

Leonard Ravaglia Pereira

New Member

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.

Sign up

Login with SSO

Login to the community

Login with SSO