The button has padding on it, and the bottom corner was rotating down. This isn't visually noticed normally because the button is a circle. But it affected the position of the tooltip,
the bottom point pushed it down.
Changing instead to animating the svg icon within the button.
Previously, the element was mounted/unmounted with the icon switch. The animation was on the parent button, so it was fine. Now that the animation is on the svg icon, it needs to stay mounted for the animation to appear.
Fixed this by swapping out the paths within the svg element.
Also took the opportunity to swap off the old styles.
Before After
The button has padding on it, and the bottom corner was rotating down. This isn't visually noticed normally because the button is a circle. But it affected the position of the tooltip, the bottom point pushed it down.
Changing instead to animating the svg icon within the button.
Previously, the element was mounted/unmounted with the icon switch. The animation was on the parent button, so it was fine. Now that the animation is on the svg icon, it needs to stay mounted for the animation to appear. Fixed this by swapping out the paths within the svg element.
Also took the opportunity to swap off the old styles.