diff --git a/packages/ui/src/lib/components/Tooltip/Tooltip.svelte b/packages/ui/src/lib/components/Tooltip/Tooltip.svelte
index da59d30a..6e833f9b 100644
--- a/packages/ui/src/lib/components/Tooltip/Tooltip.svelte
+++ b/packages/ui/src/lib/components/Tooltip/Tooltip.svelte
@@ -2,7 +2,6 @@
   import { zIndex } from '$lib/constants.js';
   import { Tooltip } from 'bits-ui';
   import type { Snippet } from 'svelte';
-  import { fly } from 'svelte/transition';
 
   type Props = Tooltip.RootProps & {
     text?: string | null;
@@ -18,21 +17,30 @@
     <Tooltip.Portal>
       <Tooltip.Content
         sideOffset={8}
-        forceMount
-        class="bg-light-800 text-light {zIndex.Tooltip} rounded-lg px-3.5 py-2 text-xs shadow-lg"
+        class="tooltip-content bg-light-800 text-light {zIndex.Tooltip} rounded-lg px-3.5 py-2 text-xs shadow-lg"
       >
-        {#snippet child({ wrapperProps, props, open })}
-          {#if open}
-            <div {...wrapperProps}>
-              <div {...props} transition:fly={{ y: 4, duration: 150 }}>
-                {text}
-              </div>
-            </div>
-          {/if}
-        {/snippet}
+        {text}
       </Tooltip.Content>
     </Tooltip.Portal>
   </Tooltip.Root>
 {:else}
   {@render child({ props: {} })}
 {/if}
+
+<style>
+  :global(.tooltip-content[data-state='delayed-open']),
+  :global(.tooltip-content[data-state='instant-open']) {
+    animation: tooltip-enter 150ms ease-out;
+  }
+
+  @keyframes tooltip-enter {
+    from {
+      opacity: 0;
+      transform: translateY(4px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+</style>