Skip to main content
Solved

Interactive Variant Jumping OnHover


RJ_Casale

I was playing with interactive variants and Im getting a strange jumpiness happening. Here are whats happening:

  • Default State
  • OnClick reveals clickable options
  • (this is when the problem occurs) Each newly exposed option OnHover shows a tooltip of the action

Here’s a prototype of it Test Page

Best answer by SJH

The width of your frame is not including the tool tips, so it’s jumping over. Change the width size of the frame to include the tooltips at every stage of the menu.

View original
This topic has been closed for comments

11 replies

Mojo
  • 67 replies
  • February 22, 2022

I’m not able to reproduce any jump on the menu. Did you tried restarting your prototype, or maybe there’s something I’m not seeing.


RJ_Casale
  • Author
  • 8 replies
  • February 22, 2022

So once you expand it and hover to get the tool tips, its not shifting?


Mojo
  • 67 replies
  • February 23, 2022


Mojo
  • 67 replies
  • February 23, 2022

If you refer to the icon rotating? That must be related to a smart animate effect on the transition


RJ_Casale
  • Author
  • 8 replies
  • February 23, 2022

Sorry. What Im saying is after those icons appear below, if you hover over them, there is a tooltip that appears to the left, then you’ll see the shifting Im referring to.


SJH
  • New Member
  • 6 replies
  • Answer
  • February 23, 2022

The width of your frame is not including the tool tips, so it’s jumping over. Change the width size of the frame to include the tooltips at every stage of the menu.


RJ_Casale
  • Author
  • 8 replies
  • February 23, 2022

That worked! Seems a bit clunky, but that also makes sense. I kept trying to make it so it was justified or fixed to the right and jump the other way but that wasn’t working. Thank you!


  • 2 replies
  • February 8, 2023

Thank you for sharing a solution! If it’s not too much trouble, would you mind explaining this a bit more? I’m running into the same issue where one of my interactive variants that has a fixed position when scrolling is jumping on hover. I tried your fix, but I must be doing something wrong because it’s still not working for me.


RJ_Casale
  • Author
  • 8 replies
  • February 8, 2023

@iharwood Look up in the comments above that answered it for me. Basically what I had to do was make the starting state height and width expanded to accommodate everything that shows after I click it. So I wanted a button on click to show other options. That first button before clicked has to include the spacing for when everything shows. Thats what’ll keep things from jumping around.


  • 2 replies
  • February 8, 2023

aah, I understand now! Thank you for breaking it down for me, this has fixed my issue and I appreciate it!


Sakthivel

This is not a proper solution. What if I am using auto layout and the clunky component (inclusive of width of all the states) moves everything out of order??


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