Transitioning tooltip position

[nvolungis]

Hey all,

I've been trying to figure out a way to transition a tooltip from one location to the next. My approach was to add transitions on the transform property, but every time tooltip data is updated the Tooltip component re-mounts so the transition is lost. I've observed this with both Tooltip and TooltipInPortal. Any ideas of ways to either prevent the remount, or accomplish the transition some other way?

Thanks!

[acd02]

Hey @nvolungis ,

It's a bit late, but it still may help 😊

To prevent the unmount/remount of the Tooltip component every time, you have to be careful not to set its key to Math.random() (even if it's written this way in the examples 😅), but you do want to assign it to some dynamic value in order to update the bounds correctly.

<TooltipWithBounds
  key={isTooltipOpen ? 1 : 0} // needed for bounds to update correctly
  style={{
    ...defaultStyles,
    opacity: isTooltipOpen ? 1 : 0,
    transition: 'all 0.1s ease-out',
    }}
    left={left}
    top={top}

Here is a codesanbox showcasing it