diff --git a/docs/en-US/component/tooltip.md b/docs/en-US/component/tooltip.md
index 4920a96c6a..4b8c117c3c 100644
--- a/docs/en-US/component/tooltip.md
+++ b/docs/en-US/component/tooltip.md
@@ -132,7 +132,13 @@ tooltip/controlled
 
 ## Animations
 
-Tooltip can be customized animated, you can set the desired animation function as you desired.
+Tooltip can be customized animated, you can set the desired animation use `transition`.
+
+:::tip
+
+Transition Classes, more information can be found at [Vue Transition](https://vuejs.org/guide/built-ins/transition.html#css-based-transitions).
+
+:::
 
 :::demo
 
diff --git a/docs/examples/tooltip/advanced-usage.vue b/docs/examples/tooltip/advanced-usage.vue
index 0b7cb211c2..3d22026c83 100644
--- a/docs/examples/tooltip/advanced-usage.vue
+++ b/docs/examples/tooltip/advanced-usage.vue
@@ -16,17 +16,3 @@ import { ref } from 'vue'
 
 const disabled = ref(false)
 </script>
-
-<style>
-.slide-fade-enter-active {
-  transition: all 0.3s ease;
-}
-.slide-fade-leave-active {
-  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
-}
-.slide-fade-enter,
-.expand-fade-leave-active {
-  margin-left: 20px;
-  opacity: 0;
-}
-</style>
diff --git a/docs/examples/tooltip/animations.vue b/docs/examples/tooltip/animations.vue
index 230108e22d..d06a31c57e 100644
--- a/docs/examples/tooltip/animations.vue
+++ b/docs/examples/tooltip/animations.vue
@@ -1,7 +1,22 @@
 <template>
-  <el-tooltip content="I am an el-tooltip">
+  <el-tooltip content="I am an el-tooltip" transition="slide-fade">
     <el-button>trigger me</el-button>
   </el-tooltip>
 </template>
 
 <script lang="ts" setup></script>
+<style>
+.slide-fade-enter-active {
+  transition: all 0.3s ease-out;
+}
+
+.slide-fade-leave-active {
+  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
+}
+
+.slide-fade-enter-from,
+.slide-fade-leave-to {
+  transform: translateX(120px);
+  opacity: 0;
+}
+</style>