Z-axis sorting conflicting with autolayout

Interactive Components Feedback
1

Hello everyone,

I have been using the autolayout feature extensively and now that interactive components are in beta I’m using those as well. Specifically, I leverage the feature to simulate tooltips when hovering over things. So imagine a situation like this:

I have 3 panels in a horizontal autolayout. The leftmost panel contains a list of navigation items that are instances of the same component. The component has 4 variants: unselected; selected; hover; tooltip that are interactive. After delay on the hover variant it changes to the tooltip variant.

Because of the autolayout the left panel is below the middle panel on the z-axis. The effect is that the tooltip (which occupies a visual space over the mid panel) is trunkated.

I guess that I am doing something wrong here because it feels like something that would occur to multiple users.

Can you please help me out?

Thanks.
Yorgos

2

To show something at the top of layers, I would recommend you to use Overlays instead of Interactive Components.

3

But the thing I want to show is the result of an interaction. Also, tooltips are a pretty standard use case of interaction and were one of the use cases listed at the interactive components presentation video. The problem is that the sorting of items inside an autolayout is determined using the same principle as z-axis position.

4

I found this thread on the topic. It seems to be a pretty common issue. I hope it gets resolved soon.

1 Like