fix(tooltip): animate scale property properly (#515)

Author: vaibhavshn

.changeset/smooth-tooltip-exit.md

@@ -0,0 +1,5 @@
+---
+"@cloudflare/kumo": patch
+---
+
+Fix tooltip popup exit transitions by animating the Tailwind `scale` property alongside opacity.

packages/kumo/src/components/tooltip/tooltip.tsx

@@ -55,12 +55,16 @@ export function tooltipVariants({
     // Base styles
     "flex origin-[var(--transform-origin)] flex-col rounded-md bg-kumo-base px-2.5 py-1.5 text-sm text-kumo-default",
     "shadow-lg shadow-kumo-tip-shadow outline outline-1 outline-kumo-fill",
-    "transition-[transform,opacity] duration-150",
+    "transition-[transform,scale,opacity] duration-150",
     "data-[starting-style]:scale-90 data-[starting-style]:opacity-0",
     "data-[ending-style]:scale-90 data-[ending-style]:opacity-0",
     "data-[instant]:duration-0",
     // Apply side-specific styles (currently none, but extensible)
-    resolveVariant(KUMO_TOOLTIP_VARIANTS.side, side, KUMO_TOOLTIP_DEFAULT_VARIANTS.side).classes,
+    resolveVariant(
+      KUMO_TOOLTIP_VARIANTS.side,
+      side,
+      KUMO_TOOLTIP_DEFAULT_VARIANTS.side,
+    ).classes,
   );
 }
 
@@ -184,7 +188,7 @@ export function Tooltip({
             className={cn(
               "flex origin-[var(--transform-origin)] flex-col rounded-md bg-kumo-base px-2.5 py-1.5 text-sm text-kumo-default",
               "shadow-lg shadow-kumo-tip-shadow outline outline-kumo-fill",
-              "transition-[transform,opacity] duration-150",
+              "transition-[transform,scale,opacity] duration-150",
               "data-[starting-style]:scale-90 data-[starting-style]:opacity-0",
               "data-[ending-style]:scale-90 data-[ending-style]:opacity-0",
               "data-[instant]:duration-0",