Poptip & Tooltip add transfer prop

Using transfer prop, the dom will be transfered to body.

src/components/poptip/poptip.vue

@@ -13,7 +13,14 @@
             <slot></slot>
         </div>
         <transition name="fade">
-            <div :class="[prefixCls + '-popper']" :style="styles" ref="popper" v-show="visible">
+            <div
+                :class="[prefixCls + '-popper']"
+                :style="styles"
+                ref="popper"
+                v-show="visible"
+                @mouseenter="handleMouseenter"
+                @mouseleave="handleMouseleave"
+                v-transfer-dom:forbidden="transfer">
                 <div :class="[prefixCls + '-content']">
                     <div :class="[prefixCls + '-arrow']"></div>
                     <div :class="[prefixCls + '-inner']" v-if="confirm">
@@ -41,6 +48,7 @@
     import Popper from '../base/popper';
     import iButton from '../button/button.vue';
     import clickoutside from '../../directives/clickoutside';
+    import TransferDom from '../../directives/transfer-dom';
     import { oneOf } from '../../utils/assist';
     import Locale from '../../mixins/locale';
 
@@ -49,7 +57,7 @@
     export default {
         name: 'Poptip',
         mixins: [ Popper, Locale ],
-        directives: { clickoutside },
+        directives: { clickoutside, TransferDom },
         components: { iButton },
         props: {
             trigger: {
@@ -83,6 +91,10 @@
             },
             cancelText: {
                 type: String
+            },
+            transfer: {
+                type: Boolean,
+                default: false
             }
         },
         data () {
@@ -161,13 +173,21 @@
                 if (this.trigger !== 'hover' || this.confirm) {
                     return false;
                 }
-                this.visible = true;
+                if (this.enterTimer) clearTimeout(this.enterTimer);
+                this.enterTimer = setTimeout(() => {
+                    this.visible = true;
+                }, 100);
             },
             handleMouseleave () {
                 if (this.trigger !== 'hover' || this.confirm) {
                     return false;
                 }
-                this.visible = false;
+                if (this.enterTimer) {
+                    clearTimeout(this.enterTimer);
+                    this.enterTimer = setTimeout(() => {
+                        this.visible = false;
+                    }, 100);
+                }
             },
             cancel () {
                 this.visible = false;

src/components/tooltip/tooltip.vue

@@ -4,7 +4,13 @@
             <slot></slot>
         </div>
         <transition name="fade">
-            <div :class="[prefixCls + '-popper']" ref="popper" v-show="!disabled && (visible || always)">
+            <div
+                :class="[prefixCls + '-popper']"
+                ref="popper"
+                v-show="!disabled && (visible || always)"
+                @mouseenter="handleShowPopper"
+                @mouseleave="handleClosePopper"
+                v-transfer-dom:forbidden="transfer">
                 <div :class="[prefixCls + '-content']">
                     <div :class="[prefixCls + '-arrow']"></div>
                     <div :class="[prefixCls + '-inner']"><slot name="content">{{ content }}</slot></div>
@@ -15,12 +21,14 @@
 </template>
 <script>
     import Popper from '../base/popper';
+    import TransferDom from '../../directives/transfer-dom';
     import { oneOf } from '../../utils/assist';
 
     const prefixCls = 'ivu-tooltip';
 
     export default {
         name: 'Tooltip',
+        directives: { TransferDom },
         mixins: [Popper],
         props: {
             placement: {
@@ -35,7 +43,7 @@
             },
             delay: {
                 type: Number,
-                default: 0
+                default: 100
             },
             disabled: {
                 type: Boolean,
@@ -48,6 +56,10 @@
             always: {
                 type: Boolean,
                 default: false
+            },
+            transfer: {
+                type: Boolean,
+                default: false
             }
         },
         data () {
@@ -57,14 +69,19 @@
         },
         methods: {
             handleShowPopper() {
+                if (this.timeout) clearTimeout(this.timeout);
                 this.timeout = setTimeout(() => {
                     this.visible = true;
                 }, this.delay);
             },
             handleClosePopper() {
-                clearTimeout(this.timeout);
-                if (!this.controlled) {
-                    this.visible = false;
+                if (this.timeout) {
+                    clearTimeout(this.timeout);
+                    if (!this.controlled) {
+                        this.timeout = setTimeout(() => {
+                            this.visible = false;
+                        }, 100);
+                    }
                 }
             }
         }

src/directives/transfer-dom.js

@@ -15,7 +15,8 @@ function getTarget (node) {
 }
 
 const directive = {
-    inserted (el, { value }, vnode) {
+    inserted (el, { value, arg }, vnode) {
+        if (arg.forbidden) return false;
         el.className = el.className ? el.className + ' v-transfer-dom' : 'v-transfer-dom';
         const parentNode = el.parentNode;
         if (!parentNode) return;
@@ -36,7 +37,8 @@ const directive = {
             }
         }
     },
-    componentUpdated (el, { value }) {
+    componentUpdated (el, { value, arg }) {
+        if (arg.forbidden) return false;
         // need to make sure children are done updating (vs. `update`)
         const ref$1 = el.__transferDomData;
         if (!ref$1) return;
@@ -60,7 +62,8 @@ const directive = {
             getTarget(value).appendChild(el);
         }
     },
-    unbind: function unbind (el, binding) {
+    unbind (el, { arg } ) {
+        if (arg.forbidden) return false;
         el.className = el.className.replace('v-transfer-dom', '');
         const ref$1 = el.__transferDomData;
         if (!ref$1) return;