diff --git a/examples/docs/zh-CN/tooltip.md b/examples/docs/zh-CN/tooltip.md
index 1bc6a84a9..baf050b12 100644
--- a/examples/docs/zh-CN/tooltip.md
+++ b/examples/docs/zh-CN/tooltip.md
@@ -12,7 +12,7 @@
 <div class="box">
   <div class="top">
     <el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start">
-      <el-button>上左</el-button>
+      <el-button class="zmm" @focus="focusHandler">上左</el-button>
     </el-tooltip>
     <el-tooltip class="item" effect="dark" content="Top Center 提示文字" placement="top">
       <el-button>上边</el-button>
@@ -56,6 +56,20 @@
     </el-tooltip>
   </div>
 </div>
+<script>
+  export default {
+    data() {
+      return {
+
+      };
+    },
+    methods: {
+      focusHandler() {
+        console.log('focusHandler');
+      }
+    }
+  };
+</script>
 
 <style>
   .box {
diff --git a/examples/versions.json b/examples/versions.json
index d8b581200..489547b2d 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"}
\ No newline at end of file
+{"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.9":"2.13"}
\ No newline at end of file
diff --git a/packages/popover/vue-popper.js b/packages/popover/vue-popper.js
index 294370e59..e181ed7b4 100644
--- a/packages/popover/vue-popper.js
+++ b/packages/popover/vue-popper.js
@@ -131,6 +131,7 @@ function useVuePopper(props, { emit, slots, referenceEl }) {
   }
 
   function updatePopper() {
+    debugger
     const popperJSRef = popperJS.value
     if (popperJSRef) {
       popperJSRef.update()
diff --git a/packages/tooltip/index.js b/packages/tooltip/index.js
index 3ae9fed0e..f88fcc380 100644
--- a/packages/tooltip/index.js
+++ b/packages/tooltip/index.js
@@ -1,4 +1,5 @@
-import Tooltip from './src/main.vue'
+// import Tooltip from './src/main.vue'
+import Tooltip from './src/main-test'
 
 /* istanbul ignore next */
 Tooltip.install = function (app) {
diff --git a/packages/tooltip/src/main-test.js b/packages/tooltip/src/main-test.js
new file mode 100644
index 000000000..98f59508a
--- /dev/null
+++ b/packages/tooltip/src/main-test.js
@@ -0,0 +1,248 @@
+import { vuePopperProps, useVuePopper } from 'packages/popover/vue-popper'
+import debounce from 'throttle-debounce/debounce'
+import { addClass, removeClass, on, off } from 'element-ui/src/utils/dom'
+import { generateId } from 'element-ui/src/utils/util'
+// eslint-disable-next-line
+import { h, createApp, ref, watch, watchEffect, onMounted, getCurrentInstance, Transition } from 'vue'
+
+export default {
+    name: 'ElTooltip',
+    emits: ['input', 'update:modelValue'],
+
+    props: {
+        ...vuePopperProps,
+        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) {
+        let timeoutPending = ref(null)
+        let timeout = ref(null)
+        let focusing = ref(false)
+        let expectedState = ref(false)
+        let referenceElm = ref(null)
+        const { emit, slots } = context
+        const {
+            openDelay,
+            disabled,
+            manual,
+            effect,
+            popperClass,
+            content,
+            transition,
+            enterable,
+            hideAfter,
+            tabindex,
+        } = props
+        let {
+            showPopper,
+            currentPlacement,
+            popperElm,
+            popperJS,
+            createPopper,
+            updatePopper,
+            doDestroy,
+            destroyPopper,
+            resetTransformOrigin,
+            appendArrow
+        } = useVuePopper(props, { emit,  slots, referenceEl: referenceElm})
+        
+        const instance = getCurrentInstance()
+        const tooltipId = `el-tooltip-${generateId()}`
+        const debounceClose = debounce(200, () => handleClosePopper())
+
+        const show = () => {
+            setExpectedState(true)
+            handleShowPopper()
+        }
+      
+        const hide = () => {
+            setExpectedState(false)
+            debounceClose()
+        }
+        const handleFocus = () => {
+            focusing.value = true
+            show()
+        }
+        const handleBlur = () => {
+            focusing.value = false
+            hide()
+        }
+        const removeFocusing = () => {
+            focusing.value = false
+        }
+
+        const addTooltipClass = (prev) => {
+            if (!prev) {
+                return 'el-tooltip'
+            } else {
+                return 'el-tooltip ' + prev.replace('el-tooltip', '')
+            }
+        }
+
+        const handleShowPopper = () => {
+            if (!expectedState.value || manual) return
+            clearTimeout(timeout.value)
+            timeout.value = setTimeout(() => {
+              showPopper.value = true
+            }, openDelay)
+      
+            if (hideAfter > 0) {
+              timeoutPending.value = setTimeout(() => {
+                showPopper.value = false
+              }, hideAfter)
+            }
+        }
+      
+        const handleClosePopper = () => {
+            if ((enterable && expectedState.value) || manual) return
+            clearTimeout(timeout.value)
+      
+            if (timeoutPending.value) {
+              clearTimeout(timeoutPending.value)
+            }
+            showPopper.value = false
+      
+            if (disabled) {
+              doDestroy()
+            }
+        }
+      
+        const setExpectedState = (state) => {
+            if (state === false) {
+              clearTimeout(timeoutPending.value)
+            }
+            expectedState.value = state
+        }
+
+        const getFirstElement = () => {
+            const slotsDefault = slots.default()
+            if (!Array.isArray(slotsDefault)) return null
+            let element = null
+            for (let index = 0; index < slotsDefault.length; index++) {
+                if (slotsDefault[index] && slotsDefault[index].type) {
+                    element = slotsDefault[index]
+                }
+            }
+            return element
+        }
+
+        watch(focusing, (val, old) => {
+            if (val) {
+                addClass(referenceElm.value, 'focusing')
+            } else {
+                removeClass(referenceElm.value, 'focusing')
+            }
+        })
+
+        watchEffect(() => {
+            debugger
+            const popperVM = createApp({
+                setup() {
+                    debugger
+                    return () => (<Transition name={transition} onAfterLeave={doDestroy}>
+                        <div
+                                onMouseleave={() => {
+                                    setExpectedState(false)
+                                    debounceClose()
+                                }}
+                                onMouseenter={() => {
+                                    setExpectedState(true)
+                                }}
+                                ref="popper"
+                                role="tooltip"
+                                id={tooltipId}
+                                aria-hidden={disabled || !showPopper.value ? 'true' : 'false'}
+                                v-show={!disabled && showPopper.value}
+                                class={[
+                                    'el-tooltip__popper',
+                                    'is-' + effect,
+                                    popperClass
+                                ]}
+                            >
+                                {slots.content ? slots.content() : content}
+                            </div>
+                    </Transition>)
+                }
+            }).mount()
+
+            debugger
+
+        })
+
+        onMounted(() => {
+            referenceElm.value = instance.ctx.$el
+            if (referenceElm.value.nodeType === 1) {
+                referenceElm.value.setAttribute('aria-describedby', tooltipId)
+                referenceElm.value.setAttribute('tabindex', tabindex)
+                on(referenceElm.value, 'mouseenter', show)
+                on(referenceElm.value, 'mouseleave', hide)
+                on(referenceElm.value, 'focus', () => {
+                  if (!slots.default || !slots.default().length) {
+                    handleFocus()
+                    return
+                  }
+                  const slotsProps = slots.default()[0].props
+
+                  if (slotsProps && slotsProps.onFocus) {
+                    slotsProps.onFocus()
+                  } else {
+                    handleFocus()
+                  }
+                })
+                on(referenceElm.value, 'blur', handleBlur)
+                on(referenceElm.value, 'click', removeFocusing)
+              }
+        })
+
+        return () => {
+            const firstElement = getFirstElement()
+            if (!firstElement) return null
+
+            const firstElementProps = (firstElement.props = firstElement.props || {})
+            firstElementProps.class = addTooltipClass(firstElementProps.class)
+
+            return firstElement
+        }
+    }
+}
diff --git a/packages/tooltip/src/main.vue b/packages/tooltip/src/main.vue
index 35d67dcef..89c7c5b81 100644
--- a/packages/tooltip/src/main.vue
+++ b/packages/tooltip/src/main.vue
@@ -104,14 +104,14 @@ export default {
     } = 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')
-    }
+    // 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,