diff --git a/examples/docs/zh-CN/tooltip.md b/examples/docs/zh-CN/tooltip.md
index 8176b775f..1bc6a84a9 100644
--- a/examples/docs/zh-CN/tooltip.md
+++ b/examples/docs/zh-CN/tooltip.md
@@ -116,8 +116,10 @@ Tooltip 组件提供了两个不同的主题：`dark`和`light`。
 :::demo 用具名 slot 分发`content`，替代`tooltip`中的`content`属性。
 ```html
 <el-tooltip placement="top">
-  <div slot="content">多行信息<br/>第二行信息</div>
-  <el-button>Top center</el-button>
+  <template v-slot:content>多行信息<br/>第二行信息</template>
+  <el-button class="test" @click="console.log(111)">Top center</el-button>
+  
+  <div class="zmm">张明明</div>
 </el-tooltip>
 ```
 :::
diff --git a/examples/versions.json b/examples/versions.json
index c3b964221..d8b581200 100644
--- a/examples/versions.json
+++ b/examples/versions.json
@@ -1 +1 @@
-{"1.4.13":"1.4","2.0.11":"2.0","2.1.0":"2.1","2.2.2":"2.2","2.3.9":"2.3","2.4.11":"2.4","2.5.4":"2.5","2.6.3":"2.6","2.7.2":"2.7","2.8.2":"2.8","2.9.2":"2.9","2.10.1":"2.10","2.11.1":"2.11","2.12.0":"2.12","0.0.8":"2.13"}
+{"1.4.13":"1.4","2.0.11":"2.0","2.1.0":"2.1","2.2.2":"2.2","2.3.9":"2.3","2.4.11":"2.4","2.5.4":"2.5","2.6.3":"2.6","2.7.2":"2.7","2.8.2":"2.8","2.9.2":"2.9","2.10.1":"2.10","2.11.1":"2.11","2.12.0":"2.12","0.0.8":"2.13"}
\ No newline at end of file
diff --git a/packages/tooltip/index.js b/packages/tooltip/index.js
index 298b3aa55..3ae9fed0e 100644
--- a/packages/tooltip/index.js
+++ b/packages/tooltip/index.js
@@ -1,4 +1,4 @@
-import Tooltip from './src/main'
+import Tooltip from './src/main.vue'
 
 /* istanbul ignore next */
 Tooltip.install = function (app) {
diff --git a/packages/tooltip/src/main-test.vue b/packages/tooltip/src/main-test.vue
new file mode 100644
index 000000000..1284cfe66
--- /dev/null
+++ b/packages/tooltip/src/main-test.vue
@@ -0,0 +1,256 @@
+<template>
+  <transition :name="transition">
+    <div
+      @mouseleave="mouseleaveHandler"
+      @mouseenter="mouseenterHandler"
+      ref="popper"
+      role="tooltip"
+      :id="tooltipId"
+      :aria-hidden="disabled || !showPopper ? 'true' : 'false'"
+      v-show="!disabled && showPopper"
+      :class="[
+                'el-tooltip__popper',
+                'is-' + effect,
+                popperClass
+            ]"
+    >
+      {{ content }}
+    </div>
+  </transition>
+</template>
+<script>
+import Popper from 'element-ui/src/utils/vue-popper'
+import debounce from 'throttle-debounce/debounce'
+import { addClass, removeClass, on } from 'element-ui/src/utils/dom'
+import { generateId } from 'element-ui/src/utils/util'
+// eslint-disable-next-line
+import {
+  watch,
+  onMounted,
+  onBeforeUnmount,
+  onUnmounted,
+  getCurrentInstance
+} from 'vue'
+
+export default {
+  name: 'ElTooltip',
+  mixins: [Popper],
+  props: {
+    openDelay: {
+      type: Number,
+      default: 0
+    },
+    disabled: Boolean,
+    manual: Boolean,
+    effect: {
+      type: String,
+      default: 'dark'
+    },
+    arrowOffset: {
+      type: Number,
+      default: 0
+    },
+    popperClass: String,
+    content: String,
+    visibleArrow: {
+      default: true
+    },
+    transition: {
+      type: String,
+      default: 'el-fade-in-linear'
+    },
+    popperOptions: {
+      default() {
+        return {
+          boundariesPadding: 10,
+          gpuAcceleration: false
+        }
+      }
+    },
+    enterable: {
+      type: Boolean,
+      default: true
+    },
+    hideAfter: {
+      type: Number,
+      default: 0
+    },
+    tabindex: {
+      type: Number,
+      default: 0
+    }
+  },
+  setup(props, context) {
+    const tooltipId = `el-tooltip-${generateId()}`
+    let timeoutPending = null
+    let focusing = false
+    const expectedState = false
+    const debounceClose = debounce(200, () => handleClosePopper())
+    let timeout = null
+    const currentInstance = getCurrentInstance()
+
+    const { slots } = context
+    const {
+      value,
+      transition,
+      content,
+      disabled,
+      manual,
+      effect,
+      popperClass,
+      enterable,
+      tabindex
+    } = props
+
+    watch(
+      () => focusing,
+      (val) => {
+        if (val) {
+          addClass(this.referenceElm, 'focusing')
+        } else {
+          removeClass(this.referenceElm, 'focusing')
+        }
+      }
+    )
+
+    const mouseleaveHandler = () => {
+      setExpectedState(false)
+      debounceClose()
+    }
+    const mouseenterHandler = () => {
+      setExpectedState(true)
+    }
+
+    const show = () => {
+      setExpectedState(true)
+      handleShowPopper()
+    }
+
+    const hide = () => {
+      setExpectedState(false)
+      debounceClose()
+    }
+
+    const handleFocus = () => {
+      focusing = true
+      show()
+    }
+
+    const handleBlur = () => {
+      focusing = false
+      hide()
+    }
+    const removeFocusing = () => {
+      focusing = false
+    }
+
+    // const addTooltipClass = (prev) => {
+    //   if (!prev) {
+    //     return 'el-tooltip'
+    //   } else {
+    //     return 'el-tooltip ' + prev.replace('el-tooltip', '')
+    //   }
+    // }
+
+    const handleShowPopper = () => {
+      const { ctx } = currentInstance
+      if (!expectedState || manual) return
+      clearTimeout(timeout)
+      timeout = setTimeout(() => {
+        ctx.showPopper = true
+      }, openDelay)
+
+      if (hideAfter > 0) {
+        timeoutPending = setTimeout(() => {
+          ctx.showPopper = false
+        }, hideAfter)
+      }
+    }
+
+    const handleClosePopper = () => {
+      const { ctx } = currentInstance
+      if ((enterable && expectedState) || manual) return
+      clearTimeout(timeout)
+
+      if (timeoutPending) {
+        clearTimeout(timeoutPending)
+      }
+      ctx.showPopper = false
+
+      if (disabled) {
+        doDestroy()
+      }
+    }
+
+    const setExpectedState = (expectedState) => {
+      if (expectedState === false) {
+        clearTimeout(timeoutPending)
+      }
+      expectedState = expectedState
+    }
+
+    const getFirstElement = () => {
+      const slots = slots.default()
+      if (!Array.isArray(slots)) return null
+      let element = null
+      for (let index = 0; index < slots.length; index++) {
+        if (slots[index] && slots[index].tag) {
+          element = slots[index]
+        }
+      }
+      return element
+    }
+
+    onMounted(() => {
+      console.log(currentInstance)
+      let referenceElm = currentInstance.vnode.el
+      if (referenceElm.nodeType === 1) {
+        referenceElm.setAttribute('aria-describedby', tooltipId)
+        referenceElm.setAttribute('tabindex', tabindex)
+        //   on(referenceElm, 'mouseenter', show)
+        //   on(referenceElm, 'mouseleave', hide)
+        on(referenceElm, 'focus', () => {
+          if (!slots.default() || !slots.default().length) {
+            handleFocus()
+            return
+          }
+          const instance = slots.default()[0].componentInstance
+          if (instance && instance.focus) {
+            instance.focus()
+          } else {
+            handleFocus()
+          }
+        })
+        //   on(referenceElm, 'blur', handleBlur)
+        //   on(referenceElm, 'click', removeFocusing)
+      }
+      // fix issue https://github.com/ElemeFE/element/issues/14424
+      // if (this.value && this.popperVM) {
+      //   this.popperVM.$nextTick(() => {
+      //     if (this.value) {
+      //       this.updatePopper()
+      //     }
+      //   })
+      // }
+    })
+
+    onBeforeUnmount(() => {})
+
+    onUnmounted(() => {})
+
+    return {
+      mouseleaveHandler,
+      mouseenterHandler,
+      show,
+      hide,
+      handleBlur,
+      removeFocusing,
+      transition,
+      tooltipId,
+      disabled,
+      effect,
+      popperClass
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/packages/tooltip/src/main.js b/packages/tooltip/src/main.js
index 2c8b00f21..7614c8ede 100644
--- a/packages/tooltip/src/main.js
+++ b/packages/tooltip/src/main.js
@@ -244,9 +244,9 @@ export default {
       let element = null
       for (let index = 0; index < slots.length; index++) {
         console.log(slots[index], 'slots[index]');
-        // if (slots[index] && slots[index].tag) {
+        if (slots[index] && slots[index].type) {
           element = slots[index]
-        // }
+        }
       }
       return element
     }
diff --git a/packages/tooltip/src/main.vue b/packages/tooltip/src/main.vue
index e48a1c08c..35d67dcef 100644
--- a/packages/tooltip/src/main.vue
+++ b/packages/tooltip/src/main.vue
@@ -1,30 +1,35 @@
 <template>
-  <transition :name="transition">
-    <div
-      @mouseleave="mouseleaveHandler"
-      @mouseenter="mouseenterHandler"
-      ref="popper"
-      role="tooltip"
-      :id="tooltipId"
-      :aria-hidden="disabled || !showPopper ? 'true' : 'false'"
-      v-show="!disabled && showPopper"
-      :class="[
-                'el-tooltip__popper',
-                'is-' + effect,
-                popperClass
-            ]"
-    >
-      <slot></slot>
-    </div>
-  </transition>
+  <slot name="default" :class="className">
+  </slot>
+  <teleport to="body">
+    <transition :name="transition" @after-leave="doDestroy">
+      <div
+        @mouseleave="mouseleaveHandler"
+        @mouseenter="mouseenterHandler"
+        ref="popper"
+        role="tooltip"
+        :id="tooltipId"
+        :aria-hidden="disabled || !showPopper ? 'true' : 'false'"
+        v-show="!disabled && showPopper"
+        :class="[
+          'el-tooltip__popper',
+          'is-' + effect,
+          popperClass
+        ]"
+      >
+        <slot name="content" v-if="slots.content"></slot>
+        <template v-else>{{ content }}</template>
+      </div>
+    </transition>
+  </teleport>
 </template>
 <script>
-import Popper from 'element-ui/src/utils/vue-popper'
+import { vuePopperProps, useVuePopper } from 'packages/popover/vue-popper'
 import debounce from 'throttle-debounce/debounce'
 import { addClass, removeClass, on } from 'element-ui/src/utils/dom'
 import { generateId } from 'element-ui/src/utils/util'
-// eslint-disable-next-line
 import {
+  h,
   watch,
   onMounted,
   onBeforeUnmount,
@@ -34,8 +39,13 @@ import {
 
 export default {
   name: 'ElTooltip',
-  mixins: [Popper],
+  emits: ['input', 'update:modelValue'],
   props: {
+    ...vuePopperProps,
+    className: {
+      type: String,
+      default: ''
+    },
     openDelay: {
       type: Number,
       default: 0
@@ -81,15 +91,6 @@ export default {
     }
   },
   setup(props, context) {
-    const tooltipId = `el-tooltip-${generateId()}`
-    let timeoutPending = null
-    let focusing = false
-    const expectedState = false
-    const debounceClose = debounce(200, () => handleClosePopper())
-    let timeout = null
-    const currentInstance = getCurrentInstance()
-
-    const { slots } = context
     const {
       value,
       transition,
@@ -101,6 +102,36 @@ export default {
       enterable,
       tabindex
     } = props
+    const { slots } = context
+
+    if (Array.isArray(slots.default())) {
+      slots.default().forEach((slot) => {
+        console.log( h(slot) )
+      })
+    }
+    if (slots.content) {
+      console.log(slots.content(), 'slots.content')
+    }
+    const {
+      showPopper,
+      currentPlacement,
+      popperElm,
+      popperJS,
+      createPopper,
+      updatePopper,
+      doDestroy,
+      destroyPopper,
+      resetTransformOrigin,
+      appendArrow
+    } = useVuePopper(props, context)
+
+    const tooltipId = `el-tooltip-${generateId()}`
+    let timeoutPending = null
+    let focusing = false
+    let expectedState = false
+    const debounceClose = debounce(200, () => handleClosePopper())
+    let timeout = null
+    const currentInstance = getCurrentInstance()
 
     watch(
       () => focusing,
@@ -202,7 +233,6 @@ export default {
     }
 
     onMounted(() => {
-      console.log(currentInstance)
       let referenceElm = currentInstance.vnode.el
       if (referenceElm.nodeType === 1) {
         referenceElm.setAttribute('aria-describedby', tooltipId)
@@ -239,6 +269,8 @@ export default {
     onUnmounted(() => {})
 
     return {
+      className: context.attrs.class,
+      slots,
       mouseleaveHandler,
       mouseenterHandler,
       show,
@@ -246,8 +278,10 @@ export default {
       handleBlur,
       removeFocusing,
       transition,
+      doDestroy,
       tooltipId,
       disabled,
+      showPopper,
       effect,
       popperClass
     }