Allow Hover AND Click together

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.

@Peter_Bentley video solution above is best workaround if you also make sure:

  • 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

Following those points will address @Bart_Van_Hecke and @Mathias_Mouchard’s issues.

1 Like

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

1 Like

Can designers please stop suggesting half-cocked “workarounds” so that Figma actually has incentive to fix something basic? Thanks.


The need is basically allowing an “AND”.

“If hovering AND click THEN ______”. This is how browsers work. I hover over a button and the state changes, then I click and it performs some action.

It is basically allowing 2 actions to trigger at the same time.


For all humanity please make this happen. :pray:t3:


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.

This topic started May 2021 … :hourglass_flowing_sand: topic still open,
360 votes…
Maybe it’s time for “Little Big Update” that’s really needed?


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. :wink:

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?

Let me know if this was helpful

I would’ve shown the video but forum isn’t allowing me for some reason!

This sounds promising! Any way you could upload the video someplace else and link to it? Thanks!

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.

1 Like

This is a no brainer IMO I blame Adobe :stuck_out_tongue_winking_eye:!

1 Like


Can someone from Figma team take a stab on this?

1 Like

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.

Hope this helps! Please let me know if you have any further question.

1 Like

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.