Skip to main content
Solved

How do I make hover effects tooltips overlay on top of other layers?


Brennan_Hom

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?

 

Best answer by Nellya

Probably your frames are inside the auto layout. If so, change the canvas stacking

 

View original

3 replies

Nellya
  • Power Member
  • 567 replies
  • Answer
  • April 17, 2025

Probably your frames are inside the auto layout. If so, change the canvas stacking

 


Wirkkarl
  • New Participant
  • 16 replies
  • April 18, 2025
Brennan_Hom wrote:

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.


Wirkkarl
  • New Participant
  • 16 replies
  • April 21, 2025

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!


Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings