This is it! THIS is the answer! Thanks!
Just make its own feature work. It literally allows two different interactions to be added to objects, but only one works. Figma is going to put me into an insane asylum with all its non-working features like this
1 Like
Its a shame it has to be this complex and figma can’t simply allow two interactions at once, but yes this works!
Additional tip: Don’t reset the bounding on your hover over instance so you can continue to use the same X, Y placement parameters.
Creating a button with a hover-effect from point A to B is simple enough. The annoyance of this today is that it adds “bloat” to your design files.
However, the main issue I face is when you are creating overlay components. I will try to break it down below.
Use-case:
- Button within a frame opens a component
- I want to add a hover-state to indicate a change and give the user strenghtened visual cues to the button
- Clicking on the added hover-button opens up the overlay component
- Issue 1: When closing the overlay component the hover-button still acts as active. When building complex systems where a button exists across multiple screens this causes a lot of issues. For instance, on the overlay component you must today set the exist of the overlay component to an existing screen to “reload” all interactions. When the user is standing on one page he/she might therefore be redirected to a previous screen. All progress is thus lost. Issue 2 If you only add “close overlay” to an overlay the screen will freeze and the hover-layer will act as the main component. The only workaround is to restart the prototype.
I could keep going with all issues this creates…
Instead, I will add a solution. On each component there should be a possibility to add a hover effect. “Add hover effects” where you can add effects, backgrounds, font colour changes, etc.
This solution should not create these problems, since the button itself would work as usual, with the addition of simple colour/effect changes on hover.
Yes, same over here please 
I think Figma fixed this in a recent update, I have button components with hover variant interactions that are working with click interactions now (not using the mouse up workaround)
Interesting, doesn’t seem to work for me.
My work around is to also include another invisible button with the tooltip.
-
Real button with hover event to show tooltip
-
Tooltip overlay w/ invisible button. Invisible button will have the click event to go to the next frame.
4 Likes
Mouse enter - Open overlay - (set your hotspot/tooltip overlay)
On click → Navigate to, etc.- (your next frame/screen/location)
Those two interactions work together on the same object or component if you follow these steps when presenting prototype (or mention when sharing) :
1.) Hover over area/button to trigger your hotspot/tooltip. 2) Over the same area that triggers it on, click to close it. 3) Without moving your cursor click again to trigger On click interaction.
Not perfect, but presentable.
Note: It won’t work if your h/t overlays the trigger area and your cursor is on top of the h/t… but that’s just bad design to begin with lol
While evaluating Figma I ran into this issue. I first thought this was a bug but according to the support it is by design. To me this seems like really weird design choice NOT to allow click and hover on the same element. I cannot think of more basic example of what should be possible with the interactions – quite usually UI:s have buttons which do stuff when hovered and clicked.
2 Likes
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.
1 Like
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 Like
+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…
2 Likes
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.
4 Likes