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>