How do I make hover effects tooltips overlay on top of other layers?
I’m creating a social media post card and I have a hover animation effect for the post interaction buttons. But when I hover over it in preview mode, the tooltips get cutoff by the layer below it despite it being on top with no *Clip content* selected.
Anyone know why this is and how I get work my way around this?
Page 1 / 1
Probably your frames are inside the auto layout. If so, change the canvas stacking
I’m creating a social media post card and I have a hover animation effect for the post interaction buttons. But when I hover over it in preview mode, the tooltips get cutoff by the layer below it despite it being on top with no *Clip content* selected.
Anyone know why this is and how I get work my way around this?
Sounds like the tooltip is getting clipped due to auto layout or frame nesting. Even if Clip content is off, auto layout can affect stacking and z-order behavior.
Quick fix: Check if your tooltip is inside a frame that's in an auto layout — if yes, try moving it outside that frame or to a higher layer in the canvas hierarchy. Also, manually adjust the canvas stacking order to ensure the tooltip is truly "on top."
Figma can be picky with layer nesting, even if everything visually looks right.
This usually happens because of the frame structure or auto layout behavior in Figma. Even if Clip content is unchecked, make sure the tooltip layer is positioned above all others in the layer hierarchy. Also, check if it's inside a parent frame with constraints or auto layout that may still be limiting visibility. Try moving the tooltip to a separate frame or placing it outside of the content group where it can freely overflow. If you're prototyping, using an overlay in the interaction settings might also fix the issue. Hope that helps!