Allow Hover AND Click together

@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.

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

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. 🙏🏽

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 … ⏳ 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. 😉

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!