Tabs not working properly

[Syeds]

Why do these vertical tabs work when hoverung from the bottom to the top and not the top to bottom?

https://www.dropbox.com/s/zif3eauqf8qhxwt/L2-participating-in-Naep-test01.xd?dl=0 

[Spas K. · Accepted solution]

Hey, the reason is that on hover, the bounding box of the component starts at the top of the tab hovered. So when you go from bottom to top, you are leaving the top of the hovered tab, and entering the next one. When you go from top to bottom, however, the top tab already overlaps the bottom tabs, and you can't activate a separate hover state when this one is still active, since you are never leaving the bounding box of the current hover state.

Overall, what you are trying to do here requires a feature I like to call "remote triggers", which would be one component changing another's state. Sadly, there doesn't seem to be any indication that the team is planning on implementing that in the near future, despite our request and upvotes on user voice.

The way you've made it kinda seems to work, but if you scroll while hovering one of those tabs, a lot of weird things happen 🙂 The safest way would be using Tap trigger, and changing the parent component, like in your previous example with the horizontal scroll & the year tabs. It will not be perfect, but will be more stable. And I think clicking to activate the different maps makes more sense from UX perspective anyways.

[Syeds]

Thank you.