From 09382b3e5019be18a129bc54936b8d3216d50dd4 Mon Sep 17 00:00:00 2001
From: wanlei <wanlei@yidian-inc.com>
Date: Fri, 3 Nov 2017 18:06:00 +0800
Subject: [PATCH 1/4] fix: [tooltip] mount every time

---
 components/tooltip/demo/basic.vue |  66 ++++++++++++++++++
 components/tooltip/index.js       |   1 +
 components/tooltip/tooltip.vue    | 109 ++++++++++++++++--------------
 examples/tooltip.vue              |  30 --------
 4 files changed, 124 insertions(+), 82 deletions(-)
 create mode 100644 components/tooltip/demo/basic.vue
 delete mode 100644 examples/tooltip.vue

diff --git a/components/tooltip/demo/basic.vue b/components/tooltip/demo/basic.vue
new file mode 100644
index 000000000..c9169f442
--- /dev/null
+++ b/components/tooltip/demo/basic.vue
@@ -0,0 +1,66 @@
+<template>
+  <div>
+    <tool-tip
+      placement="bottom"
+      :title="showText">
+      <h1 @click="boom" style="display: inline-block">This is just a test, put your cursor here</h1>
+    </tool-tip>
+    <ant-button>2223</ant-button>
+    <div class="box">
+      <table>
+        <tr v-for="(tr, index) in table" :key="index">
+          <td v-for="(td, i) in tr" :key="i">
+            <tool-tip v-if="td" :placement="td" :title="td"><AntButton type="primary">{{td}}</AntButton></tool-tip>
+          </td>
+        </tr>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script>
+  import { ToolTip, Button } from '../../../components'
+  import '../../../components/button/style'
+	export default {
+		name: 'tooltip-basic',
+		data() {
+			return {
+        show: true,
+        showText: '你好啊，233',
+        table: [
+          ['', 'topLeft', 'top', 'topRight', ''],
+          ['leftTop', '', '', '', 'rightTop'],
+          ['left', '', '', '', 'right'],
+          ['leftBottom', '', '', '', 'rightBottom'],
+          ['', 'bottomLeft', 'bottom', 'bottomRight', ''],
+        ]
+      }
+		},
+    methods: {
+		  boom() {
+		    this.showText += '3'
+      }
+    },
+    components: {
+		  ToolTip,
+      AntButton: Button,
+    },
+    beforeUpdate() {
+		  console.info(90909090)
+    }
+	}
+</script>
+<style scoped lang="less">
+  .box {
+    margin: 100px;
+  }
+  table {
+    td {
+      padding: 20px;
+    }
+    p {
+      text-align: center;
+      vertical-align: middle;
+    }
+  }
+</style>
diff --git a/components/tooltip/index.js b/components/tooltip/index.js
index 4b5f7d8bc..b93dd566a 100644
--- a/components/tooltip/index.js
+++ b/components/tooltip/index.js
@@ -1,3 +1,4 @@
 import ToolTip from './tooltip.vue'
+import './style'
 export default ToolTip
 
diff --git a/components/tooltip/tooltip.vue b/components/tooltip/tooltip.vue
index 33912bae6..e7dfb2353 100644
--- a/components/tooltip/tooltip.vue
+++ b/components/tooltip/tooltip.vue
@@ -33,7 +33,6 @@ export default {
       visible: false,
       left: 0,
       top: 0,
-      domNode: null,
     }
   },
   computed: {
@@ -44,42 +43,46 @@ export default {
       }
     },
   },
-  created() {
-    const div = document.createElement('div')
-    document.body.appendChild(div)
-    const that = this
-    const vnode = new Vue({
-      data() {
-        return {
-          left: 0,
-          top: 0,
-        }
-      },
-      render(h) {
-        return (
-          <transition name="zoom-big">
-            <div
-              v-show={that.visible}
-              class={`ant-tooltip ant-tooltip-placement-${that.placement}`}
-              style={{ left: this.left + 'px', top: this.top + 'px' }}
-            >
-              <div class="ant-tooltip-content">
-                <div class="ant-tooltip-arrow"/>
-                <div class="ant-tooltip-inner">
-                  <span>{that.title}</span>
+  methods: {
+    mountNode(callback) {
+      if (this.vnode) {
+        callback()
+        return
+      }
+      const div = document.createElement('div')
+      document.body.appendChild(div)
+      const that = this
+      const vnode = new Vue({
+        data() {
+          return {
+            left: 0,
+            top: 0,
+          }
+        },
+        render(h) {
+          return (
+            <transition name="zoom-big">
+              <div
+                v-show={that.visible}
+                class={`ant-tooltip ant-tooltip-placement-${that.placement}`}
+                style={{ left: this.left + 'px', top: this.top + 'px' }}
+              >
+                <div class="ant-tooltip-content">
+                  <div class="ant-tooltip-arrow"/>
+                  <div class="ant-tooltip-inner">
+                    <span>{that.title}</span>
+                  </div>
                 </div>
               </div>
-            </div>
-          </transition>
-        )
-      }
-    }).$mount(div)
-    this.$nextTick(() => {
-      this.vnode = vnode
-      this.domNode = div
-    })
-  },
-  methods: {
+            </transition>
+          )
+        }
+      }).$mount(div)
+      this.$nextTick(() => {
+        this.vnode = vnode
+        callback()
+      })
+    },
     onPopupAlign: (placement, domNode, target, align) => {
       if (!placement) {
         return;
@@ -118,10 +121,10 @@ export default {
       left += window.scrollX
       const ret = { left, top }
 
-      if (/top/.test(placement)) ret.top -= popup.height
-      if (/bottom/.test(placement)) ret.top += height
-      if (/left/.test(placement)) ret.left -= popup.width
-      if (/right/.test(placement)) ret.left += width
+      if (/top/.test(placement)) ret.top -= popup.height + 5
+      if (/bottom/.test(placement)) ret.top += height + 5
+      if (/left/.test(placement)) ret.left -= popup.width + 10
+      if (/right/.test(placement)) ret.left += width + 5
 
       if (/Left/.test(placement)) {
       } else if(/Right/.test(placement)) {
@@ -138,41 +141,43 @@ export default {
       return ret
     },
     showNode() {
-      this.visible = true
-      this.$nextTick(() => {
-        const popup = this.vnode.$el.getBoundingClientRect()
-        const content = this.$el.getBoundingClientRect()
-        const { left, top } = this.computeOffset(popup, content, this.placement)
-        this.vnode.left = left
-        this.vnode.top = top
+      this.mountNode(() => {
+        this.visible = true
+        this.$nextTick(() => {
+          const popup = this.vnode.$el.getBoundingClientRect()
+          const content = this.$el.getBoundingClientRect()
+          const { left, top } = this.computeOffset(popup, content, this.placement)
+          this.vnode.left = left
+          this.vnode.top = top
+        })
+        this.onPopupAlign(this.placement, this.$el, this.vnode.$el, { offset: [0,0] })
       })
-      this.onPopupAlign(this.placement, this.$el, this.vnode.$el, { offset: [0,0] })
     },
     hideNode() {
       this.visible = false
     }
   },
   render(h) {
-    let node = this.vnode
     const inner = this.$slots.default[0]
     inner.data = inner.data || {}
     inner.data.on = inner.data.on || {}
     inner.data.on.mouseenter = this.addEventHandle(inner.data.on.mouseenter, this.showNode)
     inner.data.on.mouseleave = this.addEventHandle(inner.data.on.mouseleave, this.hideNode)
-//    console.info(inner)
+
     return this.$slots.default[0]
   },
   updated() {
+    if (!this.vnode) return
     const popup = this.vnode.$el.getBoundingClientRect()
     const content = this.$el.getBoundingClientRect()
     const { left, top } = this.computeOffset(popup, content, this.placement)
     this.vnode.left = left
     this.vnode.top = top
   },
-  beforeDestory() {
-    console.info('没有成功清除实例 ，看vue panel')
+  beforeDestroy() {
+    if (!this.vnode) return
+    this.vnode.$el.remove()
     this.vnode.$destroy();
-    this.domNode && this.domNode.remove()
   }
 }
 </script>
diff --git a/examples/tooltip.vue b/examples/tooltip.vue
deleted file mode 100644
index 651957dbd..000000000
--- a/examples/tooltip.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<template>
-  <div>
-    <tool-tip
-      placement="top"
-      :title="showText">
-      <h1 @click="boom" style="display: inline-block">This is just a test, put your cursor here</h1>
-    </tool-tip>
-  </div>
-</template>
-
-<script>
-  import { ToolTip } from '../components'
-	export default {
-		name: '',
-		data() {
-			return {
-        show: true,
-        showText: '你好啊，23'
-      }
-		},
-    methods: {
-		  boom() {
-		    this.showText += '3'
-      }
-    },
-    components: {
-		  ToolTip
-    }
-	}
-</script>

From c0c246ed112a5536c4c11637de7981ab0b03877b Mon Sep 17 00:00:00 2001
From: wanlei <wanlei@yidian-inc.com>
Date: Fri, 3 Nov 2017 20:53:01 +0800
Subject: [PATCH 2/4] fix: [tooltip] different placement

---
 components/tooltip/demo/basic.vue | 17 +++++++++--------
 components/tooltip/tooltip.vue    | 24 ++++++++++++++++++++----
 2 files changed, 29 insertions(+), 12 deletions(-)

diff --git a/components/tooltip/demo/basic.vue b/components/tooltip/demo/basic.vue
index c9169f442..a1e0451d3 100644
--- a/components/tooltip/demo/basic.vue
+++ b/components/tooltip/demo/basic.vue
@@ -1,11 +1,11 @@
 <template>
   <div>
     <tool-tip
-      placement="bottom"
+      placement="top"
       :title="showText">
       <h1 @click="boom" style="display: inline-block">This is just a test, put your cursor here</h1>
     </tool-tip>
-    <ant-button>2223</ant-button>
+    <ant-button>{{showText}}</ant-button>
     <div class="box">
       <table>
         <tr v-for="(tr, index) in table" :key="index">
@@ -19,8 +19,8 @@
 </template>
 
 <script>
-  import { ToolTip, Button } from '../../../components'
-  import '../../../components/button/style'
+  import { ToolTip, Button } from 'antd'
+  import 'antd/button/style'
 	export default {
 		name: 'tooltip-basic',
 		data() {
@@ -38,15 +38,16 @@
 		},
     methods: {
 		  boom() {
-		    this.showText += '3'
+		    if (this.showText.length % 20) {
+          this.showText += '3'
+        } else {
+		      this.showText += ' '
+        }
       }
     },
     components: {
 		  ToolTip,
       AntButton: Button,
-    },
-    beforeUpdate() {
-		  console.info(90909090)
     }
 	}
 </script>
diff --git a/components/tooltip/tooltip.vue b/components/tooltip/tooltip.vue
index e7dfb2353..80068597c 100644
--- a/components/tooltip/tooltip.vue
+++ b/components/tooltip/tooltip.vue
@@ -33,6 +33,7 @@ export default {
       visible: false,
       left: 0,
       top: 0,
+      realPlacement: this.placement,
     }
   },
   computed: {
@@ -44,6 +45,19 @@ export default {
     },
   },
   methods: {
+    checkPosition(popup, text, placement) {
+      let { top, left, bottom, right } = text
+      const reg = /(top|bottom|left|right)(.*)/
+      const [, abstractPos, suffix] = placement.match(reg)
+      console.info(right - left, popup.width)
+      let ret = placement
+      // we can change the position many times
+      if (abstractPos === 'left' && left < popup.width) ret = 'right' + suffix
+      if (abstractPos === 'right' && document.documentElement.clientWidth - right < popup.width) ret = 'left' + suffix
+      if (abstractPos === 'top' && top < popup.height) ret = 'bottom' + suffix
+      if (abstractPos === 'bottom' && document.documentElement.clientHeight - bottom < popup.height) ret = 'left' + suffix
+      return ret
+    },
     mountNode(callback) {
       if (this.vnode) {
         callback()
@@ -64,7 +78,7 @@ export default {
             <transition name="zoom-big">
               <div
                 v-show={that.visible}
-                class={`ant-tooltip ant-tooltip-placement-${that.placement}`}
+                class={`ant-tooltip ant-tooltip-placement-${that.realPlacement}`}
                 style={{ left: this.left + 'px', top: this.top + 'px' }}
               >
                 <div class="ant-tooltip-content">
@@ -146,11 +160,13 @@ export default {
         this.$nextTick(() => {
           const popup = this.vnode.$el.getBoundingClientRect()
           const content = this.$el.getBoundingClientRect()
-          const { left, top } = this.computeOffset(popup, content, this.placement)
+          const place = this.checkPosition(popup, content, this.placement)
+          this.realPlacement = place
+          const { left, top } = this.computeOffset(popup, content, place)
           this.vnode.left = left
           this.vnode.top = top
         })
-        this.onPopupAlign(this.placement, this.$el, this.vnode.$el, { offset: [0,0] })
+        this.onPopupAlign(this.realPlacement, this.$el, this.vnode.$el, { offset: [0,0] })
       })
     },
     hideNode() {
@@ -170,7 +186,7 @@ export default {
     if (!this.vnode) return
     const popup = this.vnode.$el.getBoundingClientRect()
     const content = this.$el.getBoundingClientRect()
-    const { left, top } = this.computeOffset(popup, content, this.placement)
+    const { left, top } = this.computeOffset(popup, content, this.realPlacement)
     this.vnode.left = left
     this.vnode.top = top
   },

From 7427f8099f1569460e2805921a69533fda805534 Mon Sep 17 00:00:00 2001
From: wanlei <wanlei@yidian-inc.com>
Date: Fri, 3 Nov 2017 20:55:41 +0800
Subject: [PATCH 3/4] fix: [tooltip] new formula

---
 components/tooltip/demo/{basic.vue => index.vue} | 0
 components/tooltip/tooltip.vue                   | 1 -
 2 files changed, 1 deletion(-)
 rename components/tooltip/demo/{basic.vue => index.vue} (100%)

diff --git a/components/tooltip/demo/basic.vue b/components/tooltip/demo/index.vue
similarity index 100%
rename from components/tooltip/demo/basic.vue
rename to components/tooltip/demo/index.vue
diff --git a/components/tooltip/tooltip.vue b/components/tooltip/tooltip.vue
index 80068597c..e26091eb6 100644
--- a/components/tooltip/tooltip.vue
+++ b/components/tooltip/tooltip.vue
@@ -49,7 +49,6 @@ export default {
       let { top, left, bottom, right } = text
       const reg = /(top|bottom|left|right)(.*)/
       const [, abstractPos, suffix] = placement.match(reg)
-      console.info(right - left, popup.width)
       let ret = placement
       // we can change the position many times
       if (abstractPos === 'left' && left < popup.width) ret = 'right' + suffix

From 59f1d5b4db267e699a1e2dad7d0bcd2a9ab34e6a Mon Sep 17 00:00:00 2001
From: wanlei <wanlei@yidian-inc.com>
Date: Mon, 6 Nov 2017 12:13:36 +0800
Subject: [PATCH 4/4] update: [tooltip] more API supported

---
 components/tooltip/demo/index.vue |  40 ++++++++++--
 components/tooltip/tooltip.vue    | 102 +++++++++++++++++++++++-------
 2 files changed, 113 insertions(+), 29 deletions(-)

diff --git a/components/tooltip/demo/index.vue b/components/tooltip/demo/index.vue
index a1e0451d3..178db3bff 100644
--- a/components/tooltip/demo/index.vue
+++ b/components/tooltip/demo/index.vue
@@ -2,19 +2,37 @@
   <div>
     <tool-tip
       placement="top"
-      :title="showText">
-      <h1 @click="boom" style="display: inline-block">This is just a test, put your cursor here</h1>
+      :title="showText"
+      :autoAdjustOverflow="autoAdjustOverflow"
+    >
+      <h1 @click="boom" class="test">撞到边缘翻转位置 & 点击更新</h1>
     </tool-tip>
-    <ant-button>{{showText}}</ant-button>
+    <ant-button @click="reverse" type="primary">{{autoAdjustOverflow ? '启用' : '关闭'}}自动调整中</ant-button>
     <div class="box">
+      <h2>切换arrowPointAtCenter模式</h2>
+      <ant-button @click="change">{{arrowPointAtCenter}}</ant-button>
       <table>
         <tr v-for="(tr, index) in table" :key="index">
           <td v-for="(td, i) in tr" :key="i">
-            <tool-tip v-if="td" :placement="td" :title="td"><AntButton type="primary">{{td}}</AntButton></tool-tip>
+            <tool-tip
+              v-if="td"
+              :placement="td"
+              :title="td"
+              :arrowPointAtCenter="arrowPointAtCenter"
+            >
+              <AntButton type="primary">{{td}}</AntButton>
+            </tool-tip>
           </td>
         </tr>
       </table>
     </div>
+    <div>
+      <p>
+        <tool-tip :arrowPointAtCenter="true" title="Consider using the NamedModulesPlugin for module names." placement="topLeft">
+          <ant-button>arrowPointAtCenter arrowPointAtCenter arrowPointAtCenter</ant-button>
+        </tool-tip>
+      </p>
+    </div>
   </div>
 </template>
 
@@ -33,7 +51,9 @@
           ['left', '', '', '', 'right'],
           ['leftBottom', '', '', '', 'rightBottom'],
           ['', 'bottomLeft', 'bottom', 'bottomRight', ''],
-        ]
+        ],
+        arrowPointAtCenter: false,
+        autoAdjustOverflow: true,
       }
 		},
     methods: {
@@ -43,6 +63,12 @@
         } else {
 		      this.showText += ' '
         }
+      },
+      change() {
+		    this.arrowPointAtCenter = !this.arrowPointAtCenter
+      },
+      reverse() {
+		    this.autoAdjustOverflow = !this.autoAdjustOverflow
       }
     },
     components: {
@@ -52,6 +78,10 @@
 	}
 </script>
 <style scoped lang="less">
+  .test {
+    margin: 20px;
+    display: inline-block;
+  }
   .box {
     margin: 100px;
   }
diff --git a/components/tooltip/tooltip.vue b/components/tooltip/tooltip.vue
index e26091eb6..b0e17ff46 100644
--- a/components/tooltip/tooltip.vue
+++ b/components/tooltip/tooltip.vue
@@ -34,6 +34,8 @@ export default {
       left: 0,
       top: 0,
       realPlacement: this.placement,
+      t1: null,
+      t2: null,
     }
   },
   computed: {
@@ -72,13 +74,30 @@ export default {
             top: 0,
           }
         },
+        methods: {
+          hideSelf(e) {
+            if (that.t1) {
+              clearTimeout(that.t1)
+              that.t1 = null
+            }
+            if (that.mouseLeaveDelay) {
+              that.t2 = window.setTimeout(() => {
+                if (e.relatedTarget === that.$el) {
+                  return
+                }
+                that.visible = false
+              }, +that.mouseLeaveDelay * 1e3)
+            }
+          }
+        },
         render(h) {
           return (
-            <transition name="zoom-big">
+            <transition name={that.transitionName}>
               <div
                 v-show={that.visible}
                 class={`ant-tooltip ant-tooltip-placement-${that.realPlacement}`}
                 style={{ left: this.left + 'px', top: this.top + 'px' }}
+                onMouseleave={this.hideSelf}
               >
                 <div class="ant-tooltip-content">
                   <div class="ant-tooltip-arrow"/>
@@ -98,25 +117,25 @@ export default {
     },
     onPopupAlign: (placement, domNode, target, align) => {
       if (!placement) {
-        return;
+        return
       }
       // 根据当前坐标设置动画点
       const rect = domNode.getBoundingClientRect()
       const transformOrigin = {
         top: '50%',
         left: '50%',
-      };
+      }
       if (placement.indexOf('top') >= 0 || placement.indexOf('Bottom') >= 0) {
-        transformOrigin.top = `${rect.height - align.offset[1]}px`;
+        transformOrigin.top = `${rect.height - align.offset[1]}px`
       } else if (placement.indexOf('Top') >= 0 || placement.indexOf('bottom') >= 0) {
-        transformOrigin.top = `${-align.offset[1]}px`;
+        transformOrigin.top = `${-align.offset[1]}px`
       }
       if (placement.indexOf('left') >= 0 || placement.indexOf('Right') >= 0) {
-        transformOrigin.left = `${rect.width - align.offset[0]}px`;
+        transformOrigin.left = `${rect.width - align.offset[0]}px`
       } else if (placement.indexOf('right') >= 0 || placement.indexOf('Left') >= 0) {
-        transformOrigin.left = `${-align.offset[0]}px`;
+        transformOrigin.left = `${-align.offset[0]}px`
       }
-      target.style.transformOrigin = `${transformOrigin.left} ${transformOrigin.top}`;
+      target.style.transformOrigin = `${transformOrigin.left} ${transformOrigin.top}`
     },
     addEventHandle(old, fn) {
       if (!old) {
@@ -127,29 +146,36 @@ export default {
         return old === fn ? old : [old, fn]
       }
     },
-    computeOffset(popup, text, placement) {
+    computeOffset(popup, text, placement, scale) {
       let { width, height, top, left } = text
       //  you cant change the properties of DOMRect
       top += window.scrollY
       left += window.scrollX
+      // FIXME: we can get the numbers from scale, but that's not what we really want
+      const p = { width: popup.width / scale, height: popup.height / scale }
       const ret = { left, top }
 
-      if (/top/.test(placement)) ret.top -= popup.height + 5
-      if (/bottom/.test(placement)) ret.top += height + 5
-      if (/left/.test(placement)) ret.left -= popup.width + 10
-      if (/right/.test(placement)) ret.left += width + 5
+      if (/top/.test(placement)) ret.top -= p.height
+      if (/bottom/.test(placement)) ret.top += height
+      if (/left/.test(placement)) ret.left -= p.width
+      if (/right/.test(placement)) ret.left += width
 
+      // FIXME: magic number 20 & 14 comes from the offset of triangle
       if (/Left/.test(placement)) {
+        if (this.arrowPointAtCenter) ret.left += width / 2 - 20
       } else if(/Right/.test(placement)) {
-        ret.left += (width - popup.width)
+        ret.left += (width - p.width)
+        if (this.arrowPointAtCenter) ret.left -= width / 2 - 20
       } else if(/(top)|(bottom)/.test(placement)) {
-        ret.left += (width - popup.width) / 2
+        ret.left += (width - p.width) / 2
       }
       if (/Top/.test(placement)) {
+        if (this.arrowPointAtCenter) ret.top += height / 2 - 14
       } else if(/Bottom/.test(placement)) {
-        ret.top += (height - popup.height)
+        ret.top += (height - p.height)
+        if (this.arrowPointAtCenter) ret.top -= height / 2 - 14
       } else if(/(left)|(right)/.test(placement)) {
-        ret.top += (height - popup.height) / 2
+        ret.top += (height - p.height) / 2
       }
       return ret
     },
@@ -158,41 +184,69 @@ export default {
         this.visible = true
         this.$nextTick(() => {
           const popup = this.vnode.$el.getBoundingClientRect()
+          const [, scale = 1] = window.getComputedStyle(this.vnode.$el).transform.match(/matrix\((.*?),/) || []
           const content = this.$el.getBoundingClientRect()
-          const place = this.checkPosition(popup, content, this.placement)
+          const place = this.autoAdjustOverflow ? this.checkPosition(popup, content, this.placement, scale) : this.placement
           this.realPlacement = place
-          const { left, top } = this.computeOffset(popup, content, place)
+          const { left, top } = this.computeOffset(popup, content, place, scale)
           this.vnode.left = left
           this.vnode.top = top
         })
         this.onPopupAlign(this.realPlacement, this.$el, this.vnode.$el, { offset: [0,0] })
       })
     },
-    hideNode() {
+    hideNode(e) {
+      if (!this.vnode) return
+      if (e.relatedTarget === this.vnode.$el) {
+        return
+      }
       this.visible = false
+    },
+    checkShow(e) {
+      if (this.t2) {
+        clearTimeout(this.t2)
+        this.t2 = null
+      }
+      if (this.mouseEnterDelay) {
+        this.t1 = window.setTimeout(() => {
+          this.showNode(e)
+        }, +this.mouseEnterDelay * 1e3)
+      }
+    },
+    checkHide(e) {
+      if (this.t1) {
+        clearTimeout(this.t1)
+        this.t1 = null
+      }
+      if (this.mouseLeaveDelay) {
+        this.t2 = window.setTimeout(() => {
+          this.hideNode(e)
+        }, +this.mouseLeaveDelay * 1e3)
+      }
     }
   },
   render(h) {
     const inner = this.$slots.default[0]
     inner.data = inner.data || {}
     inner.data.on = inner.data.on || {}
-    inner.data.on.mouseenter = this.addEventHandle(inner.data.on.mouseenter, this.showNode)
-    inner.data.on.mouseleave = this.addEventHandle(inner.data.on.mouseleave, this.hideNode)
+    inner.data.on.mouseenter = this.addEventHandle(inner.data.on.mouseenter, this.checkShow)
+    inner.data.on.mouseleave = this.addEventHandle(inner.data.on.mouseleave, this.checkHide)
 
     return this.$slots.default[0]
   },
   updated() {
     if (!this.vnode) return
     const popup = this.vnode.$el.getBoundingClientRect()
+    const [, scale = 1] = window.getComputedStyle(this.vnode.$el).transform.match(/matrix\((.*?),/) || []
     const content = this.$el.getBoundingClientRect()
-    const { left, top } = this.computeOffset(popup, content, this.realPlacement)
+    const { left, top } = this.computeOffset(popup, content, this.realPlacement, scale)
     this.vnode.left = left
     this.vnode.top = top
   },
   beforeDestroy() {
     if (!this.vnode) return
     this.vnode.$el.remove()
-    this.vnode.$destroy();
+    this.vnode.$destroy()
   }
 }
 </script>