I have hover and press states in their own component between variants of a text button. I then take that text button component and place it into tab component and set it up so that the nested instances properties are enabled in the new component which has been fantastic for the design system I’m working on and allowing others to use variant settings for designing.
My structure is:
icon (select icon type) > text button (hover & press) > tab (click to switch tab variations)
The tab is where I’m having issues because the text button hover and press states are in their own button component and work great. However, the click state has to be in the tabs as there can be 2-9 tabs all using the same text button component. The click is blocked by the text button hover state. I’ve tried to put a frame, target the text in the button from the tab and nothing works.
component frame hugs the button only, not the hint/tooltip
Clip content is unchecked (for any and all parent frames that could hide the tooltip)
IMPORTANT: Autolayout Canvas stacking is adjusted accordingly for the autolayout frame holding your button(s). Most likely it will need to be set to First on top
Workaround that works ok…
Assuming your button has two variants, add these prototye interactions:
Variant 1: While hovering → change to Variant 2
Variant 2: While pressing → change to Variant 1
Variant 1: Mouse up → do your desired click action
This does work. It works because mouse events happen in this order:
Mouse enter → Mouse hovering → Mouse down → Mouse pressing → Mouse up → Click → (repeat from Mouse hovering) → Mouse leave
I’m trying to implement a hover effect to show a tooltip on an icon then also be able to click the same icon to navigate to another screen. So far this has been impossible considering that it’s a real-world interaction that should be available in Figma. Any help is appreciated while we wait for Figma to provide an update to fix this BUG.
One way to handle this (conceptually) is to have a priority order. In this example Hover then Click. Hover action should be executed first then the Click action. As pointed out earlier, Figma currently treats any overlay as the active layer, so no action can be executed on the layer underneath (even if it’s visible). This is probably a core tenet of how Figma works, but it’s a huge inconvenience. A hover then click action is a fundamental interaction and should be better supported. The workaround is to create a variant for the “on hover” action and add the “click action” to the variant. Loki would not be pleased.
Guys, maybe, just maybe I’ve figured it out! I was creating a school website and wanted to give both actions (hover and click) to the same frame! What I did was, I selected the frame which I wanted to give both the triggers inside my page. Made a duplicate to give it a hover action outside of my page! You guys know how the hover action works right? Then, I gave the click trigger to the frame which is the hover one (the hover state of the button). And it turned out perfectly! You have to give the click trigger to the hover state!!! Understood?
I don’t argue it is possible. It is! But it’s only possible by some workarounds (or within a component) while it’s one of the most common patterns in desktop apps.
Just ran onto this… don’t know if anyone said this because I didn’t read the whole thread, but this is how I it can be solved:
I need an icon to display a hover tooltip and lead me to another screen. I put that icon within a frame. Now the icon triggers the tooltip, and the frame has the click action to the other page.
It gets a bit weird when navigating the prototype, because the click on the actual icon does nothing, but if you move it aside still in the frame area, you can click and go to the other page.
Figma is giving everything except for the deal breaker feature like this one. Sometimes I feel Adobe XD did quick prototyping better than any other design tool.
Bumping this thread. Any work arounds? We ran into the scenario where we had user testers accessing prototype links from both desktop and mobile devices. Check boxes component for example: hover state interactions work fine when prototypes are accessed with a mouse, but not from mobile devices.
Since there are no hover states on mobile devices the interactive component allows either “hover” or “on click” but not both. The only work around I’ve seen so far is to create separate variants for both mobile and desktop applications (removing hover state interaction from mobile component/variant). Trying to avoid adding extra component maintenance.
Hey @Tron, thank you for reaching out! Unfortunately, it’s not possible to hover on mobile, this behaviour is expected. We don’t convert hover behaviour to tap/click when you view the prototype on mobile.
As an alternative, you can create a version of the prototype with interactions that are compatible with mobile. You can add another “While Pressing” interaction to this group in addition to the hover interaction, which should make the area tappable on mobile while still functional with hover on desktop.
Posting this in case it helps others. Found a work around or intended solution for interactive component paths using “mouse enter” instead of hover. Mouse enter and leave seems to work well when combined with “on-click.” We can now access prototype links from both desktop and mobile devices without the interactions conflicting with each other.
topic still open,
!
