Figma Support Forum

Allow Hovering AND Click together

With the interactive components, a variant can now have a tooltip. But unfortunately hover and clickactions are still mutual exclusive.
I’m designing for a desktop application and having a tooltip per inputelement/button is crucial.

2 Likes

Agree - this feels so basic and simple I don’t understand why we don’t have it.
It makes even the simplest of prototypes for me extremely heavy and time-consuming to create.

4 Likes

If you add the hover on the component level you can add the click when prototyping. Or does your button change changes state when clicked? Do you have an example of the issue?

The button already has a hover in the component level.
But I need something that allows a hoverbutton, a tooltip while hovering AND a clickaction.

Of course, I could add the hover inside of the variant of my button, but therefore I’d need to remove the autolayout or add another frame that does not react as an autolayout. This is not what I want.

You can add the tooltip when prototyping as Mouse enter / Open Overlay / Manual … the problem is closing will require either a click outside or adding a separate interaction to the tooltip itself to close after a given time or when clicked on etc.

This is probably the best way to do it. But, you could create a new master component that is made-up the button and tooltip components and add the states. Although this will break layouts (probably) when swapping instances on interaction.

Otherwise what could Figma do to make this better?

But how would you activate the click on the button to reach the next frame. The “mouse enter” is not helping here. I already tried it. My current approach is to create duplicate frames (one with hover/mouse enter) to show the hover on frame1, and then by clicking somewhere randomly simulating the click action on the duplicated frame.

I’ve seen the master-component solution for tooltips in their playground that introduces the interactive components, but … it’s making things really harder. To maintain the hierarchy (so overrides are still working) all variants would need to have the same nesting. But following the instructions in the playground I’m forced to get rid of the autolayout, which makes my design not as flexible as it was before.

I don’t know what figma could do. I understand that the overlay adds … another layer, which makes everything below that layer not reachable.
Still, I wished there would be an option. E.g. by making enabling a checkbox saying: do you want to use the description of this component as tooltip? And when I click yes, it just appears. No “open as overlay” connection needed at all.

1 Like

Right! Sorry, I haven’t had my coffee yet. :slight_smile:

I didn’t realise that the Tooltip component blocks the Button even though they aren’t overlaid… that’s a bit odd.

The product seems to be a bit confused. Interactive components don’t really work with the ‘lay-out every single scenario as a frame’-approach.

Haha, no worries. I think they are already doing a great job.
And with the focus on mobile applications I also understand that something like “tooltips” or “conditional logic” is nothing you want to focus on initially. It makes things only more complicated if you don’t think it through.
But for me, to bring the interactive components to live, I’d really like to have this Hover+Click Action AND the ability to add conditions.
I know that e.g. protopie allows this and also the interaction between figma and protopie is already very good.
But then again - protopie does not support autolayout (when I checked 2 month ago) and also does not import the components created in figma.

1 Like

Yes, I agree! Maybe we’re too demanding. :slight_smile:

We moved from Axure + Sketch + InVision + Abstract + Zeplin over to Axure + Figma and the workflow is much less painful!
We still use Axure for UX and to create the fully functioning prototype. Axure can do really complex stuff, like databases, that we can’t (yet) reproduce in Figma.
For complex animations without any code I still find AE to be the fastest, although I’m wanting to check Principle or Protopie, but never find the time to properly dive in.
Anyway, let’s hope our prayers get answered and waking up in the middle of the night from a component nightmare will be a thing of the past. :slight_smile:

1 Like

Hi, I recantly also across on this problem and to be honest there’s no clear workaround to this. There’s no possible way to add hover and click interaction to the same frame and display in on preview with interactive components. But I use imperfect solution that may be also help with your problem.

I discover that it’s everything fine when variants don’t have layers that overflow basic size. Problems starts when you have tooltip that goes beyond box size.

I deal with it by for example adding hover interaction to the 24x24 icon (overlay set manually to present tooltip) and then nest this frame with another frame 40x40 (touch target) and on that parent frame add click interaction. (Details in video).

I think when interactive components leave beta, Figma team will solve this problem but for now we must carry on with imperfect tricks. Glad if this messeage help someone.