Allow Hover AND Click together

My workaround is to have the tooltip as part of the component (not ideal but what can you do) I give the tooltip an absolute position so it doesn’t mess with the autolayout of the main component

That seems a nice workaround but it implies a lor of rework for my designs. Plus the hover of my icons show a bounding box that is larger than the icon itself, pushing all other icons in my row of actions aside (unless I adjust the autolayout everywhere).

I usually weigh the extra effort it takes in figma against the added value it brings for the developers to know what and how to build. In this case it’s too much hassle for me. Best option would be indeed for Figma to finally solve this issue that has been living for years.
Besides that, I absolutely love Figma 🤟

For those who just need something that works in July of 2023, there’s a solution listed somewhere in this thread, and this video walks you through a way to make it work.

I want to add to @Peter_Bentley 's message:
Use Peter’s mentioned solution if you don’t have your icon / button with a tooltip as part of a component with autolayout. If you use this solution, the tooltip will have trouble displaying over adjacent elements because of the order of the layers inside the autolayout.

If you want to do an icon/button with a tooltip on hover, a click interaction as part of an autolayout component, do use @Gene_Parcellano 's solution Allow Hover AND Click together - #49 by Gene_Parcellano

Hope that helps fellow designers.

Seems there are a lottttt of upvotes and requests for this with no real response as to why/what is happening. Maybe this is a case of waiting for another big-bang-magic-drop-of-features we all have to just wait for in today’s “agile” world. Who knows how long that will take, maybe Q2 of 2024.

Remember folks, always listen to your users.

+1 also running into this exact issue - need a tooltip on hover + click interaction

Wow, I have just read this all after 1 hour of fiddling with variants and animation options in my prototype… This is really sad, that there is no way to set an on-click event and open an overlay on hover.

This still isn’t fixed? @figma come on…

Cannot understand why Figma isn’t listening to us about this. But we can embed videos. Whoop dee do.

Never mind the absolutely insane way that a hover overlay cannot be dismissed if it opens another overlay on click. Close top overlay and the hover overlay (only meant to appear on, gee, hover) sits there forever, trapping users and grinding a prototype to a screeching halt.

Figma, can I actually just have a job please? You clearly need some UX designers on your team who actually use the tool.

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.

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!

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.

This is a no brainer IMO I blame Adobe 😜!

+1

Can someone from Figma team take a stab on this?

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.