diff --git a/src/runtime/components/Tooltip.vue b/src/runtime/components/Tooltip.vue
index 1a260885..56c8425c 100644
--- a/src/runtime/components/Tooltip.vue
+++ b/src/runtime/components/Tooltip.vue
@@ -44,7 +44,10 @@ defineSlots<TooltipSlots>()
 const forwardRoot = useForwardPropsEmits(reactivePick(props, 'defaultOpen', 'open', 'delayDuration'), emits)
 const forwardContent = useForwardProps(reactivePick(props, 'side', 'sideOffset', 'align', 'alignOffset', 'avoidCollisions', 'collisionBoundary', 'collisionPadding', 'arrowPadding', 'sticky', 'hideWhenDetached'))
 
-const ui = computed(() => tv({ extend: tooltip, slots: props.ui })())
+// FIXME: Cannot extend multiple times
+// const ui = computed(() => tv({ extend: tooltip, slots: props.ui })())
+// eslint-disable-next-line vue/no-dupe-keys
+const ui = computed(() => tooltip())
 </script>
 
 <template>
@@ -54,7 +57,7 @@ const ui = computed(() => tv({ extend: tooltip, slots: props.ui })())
     </TooltipTrigger>
 
     <TooltipPortal :disabled="!portal">
-      <TooltipContent class="TooltipContent" v-bind="{ ...forwardContent, ...$attrs }" :class="ui.content({ class: props.class })">
+      <TooltipContent v-bind="{ ...forwardContent, ...$attrs }" :class="ui.content({ class: props.class })">
         <slot name="text">
           {{ text }}
         </slot>
@@ -65,20 +68,45 @@ const ui = computed(() => tv({ extend: tooltip, slots: props.ui })())
   </TooltipRoot>
 </template>
 
-<style scoped>
-.TooltipContent {
-  transform-origin: var(--radix-tooltip-content-transform-origin);
-  animation: scaleIn 0.5s ease-out;
-}
-
-@keyframes scaleIn {
+<style>
+@keyframes slideDown {
   from {
     opacity: 0;
-    transform: scale(0);
+    transform: translateY(-0.25rem);
   }
   to {
     opacity: 1;
-    transform: scale(1);
+    transform: translateY(0);
+  }
+}
+@keyframes slideRight {
+  from {
+    opacity: 0;
+    transform: translateX(-0.25rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(0.25rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes slideLeft {
+  from {
+    opacity: 0;
+    transform: translateX(0.25rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
   }
 }
 </style>
\ No newline at end of file
diff --git a/src/theme/tooltip.ts b/src/theme/tooltip.ts
index e3bf35c6..cafc103c 100644
--- a/src/theme/tooltip.ts
+++ b/src/theme/tooltip.ts
@@ -1,6 +1,6 @@
 export default {
   slots: {
-    content: 'bg-white dark:bg-gray-900 text-gray-900 dark:text-white shadow rounded ring-1 ring-gray-200 dark:ring-gray-800 h-6 px-2 py-1 text-xs font-normal truncate relative',
+    content: 'bg-white dark:bg-gray-900 text-gray-900 dark:text-white shadow rounded ring-1 ring-gray-200 dark:ring-gray-800 h-6 px-2 py-1 text-xs font-normal truncate relative data-[state=delayed-open]:data-[side=top]:animate-[slideDown_200ms_ease-out] data-[state=delayed-open]:data-[side=right]:animate-[slideLeft_200ms_ease-out] data-[state=delayed-open]:data-[side=left]:animate-[slideRight_200ms_ease-out] data-[state=delayed-open]:data-[side=bottom]:animate-[slideUp_200ms_ease-out] data-[state=closed]:data-[side=top]:animate-[slideUp_200ms_ease-in] data-[state=closed]:data-[side=right]:animate-[slideRight_200ms_ease-in] data-[state=closed]:data-[side=left]:animate-[slideLeft_200ms_ease-in] data-[state=closed]:data-[side=bottom]:animate-[slideDown_200ms_ease-in]',
     arrow: 'fill-white dark:fill-gray-900'
   }
 }
\ No newline at end of file