Allow Hover AND Click together

Is there a way to have a tooltip, on an element, that overlays on hover, but you can also click on the element as well?

I’ve tried to use interactive components, but as you can see below, because the tooltip is not an overlay, and sits within an auto-layout table row, it goes under the cell next to it.

I think once you open an overlay it will always block interactions with elements behind it, so I can’t think of another way to do this. Interactive components was a good idea—not ideal but I suppose you could always take auto layout off of your table rows to control the layering better.

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.

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.

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

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.