Skip to main content

Hi people, I have two components and works perfectly when I look them with my LAPTOP.

When you click, show a menu (other variant) and when mouse leave, disappear.


I sent the link of the prototype (this link https://www.figma.com/proto/XQXakrIJSWcsnws68ZKOrg/CitizenPortal?page-id=656%3A1992&node-id=656%3A1993&viewport=718%2C477%2C1&scaling=min-zoom) to my MOBILE and I have seen that when I click on my components, never close 😞.


Do I need to do something different there?


Thanks

Hope someone can reply me 🥹


Hey SoyDiego!


What triggers are you using to open the menus that appear beneath your icons?


It looks like there is something happening on ā€œmouse leaveā€ which could be the issue youā€™re having when viewing this on a mobile.


Screenshots would be really helpful 🙂


Matty


Hi @MattyH thanks for replied.

Iā€™m using mouse leave after 1000ms, here you have the screenshots:




I donā€™t know is because iā€™m using Mouse Leave and in my MOBILE canā€™t use this trigger.


I want to clarify that it is not in my browser adapting it to mobile size. I literally mean my cell phone haha


Thanks again!


Ah I see! Thank you for sharing the screenshots 🙂


I always find it helpful when prototyping to think about where the final product is going to be used.


For example if the components you are making will feature in a prototype of a mobile app then you would not want to use hover/mouse enter/mouse leave as interactions for your prototype as this would not represent the real world scenario.


Think about how you would like this to interact on a mobile device, would you instead be using a click (tap) to interact?


When the component is in itā€™s ā€˜openā€™ state, how would you then close it from a mobile device? Would you have to tap the icon again?


I hope this guides you to a solution 😁


Thanks @MattyH! Now I did it 🙂