Merge pull request #590 from QingWei-Li/feat/tooltip-manual

Tooltip: add manual feature

examples/docs/zh-cn/tooltip.md

@@ -44,7 +44,7 @@
     .item {
       margin: 4px;
     }
-    
+
     .left .el-tooltip__popper,
     .right .el-tooltip__popper {
       padding: 8px 10px;
@@ -150,19 +150,6 @@ Tooltip 组件提供了两个不同的主题：`dark`和`light`。
     <el-button @click.native="disabled=true">点击关闭 tooltip 功能</el-button>
   </el-tooltip>
 </template>
-
-<style>
-  .slide-fade-enter-active {
-    transition: all .3s ease;
-  }
-  .slide-fade-leave-active {
-    transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
-  }
-  .slide-fade-enter, .expand-fade-leave-active {
-    margin-left: 20px;
-    opacity: 0;
-  }
-</style>
 ```
 :::
 
@@ -179,3 +166,4 @@ Tooltip 组件提供了两个不同的主题：`dark`和`light`。
 |  visible-arrow   |  是否显示 Tooltip 箭头，更多参数可见[Vue-popper](https://github.com/element-component/vue-popper) | Boolean | — | true |
 |  options        | [popper.js](https://popper.js.org/documentation.html) 的参数 | Object            | 参考 [popper.js](https://popper.js.org/documentation.html) 文档 | `{ boundariesElement: 'body', gpuAcceleration: false }` |
 | openDelay | 延迟出现，单位毫秒 | Number | — | 0 |
+| manual | 手动控制模式，设置为 true 后，mouseenter 和 mouseleave 事件将不会生效 | Boolean | true,false| false |

packages/tooltip/src/main.vue

@@ -33,6 +33,7 @@ export default {
       default: 0
     },
     disabled: Boolean,
+    manual: Boolean,
     effect: {
       type: String,
       default: 'dark'
@@ -57,12 +58,14 @@ export default {
 
   methods: {
     handleShowPopper() {
+      if (this.manual) return;
       this.timeout = setTimeout(() => {
         this.showPopper = true;
       }, this.openDelay);
     },
 
     handleClosePopper() {
+      if (this.manual) return;
       clearTimeout(this.timeout);
       this.showPopper = false;
     }

test/unit/specs/tooltip.spec.js

@@ -1,4 +1,4 @@
-import { createVue } from '../util';
+import { createVue, triggerEvent } from '../util';
 
 describe('Tooltip', () => {
   it('create', () => {
@@ -10,6 +10,44 @@ describe('Tooltip', () => {
     expect(vm.$el.querySelector('.el-tooltip__popper')).to.have.property('textContent', '提示文字');
   });
 
+  describe('manual', () => {
+    const vm = createVue({
+      template: `
+        <el-tooltip ref="tooltip" manual content="abc" v-model="show">
+          <button>click</button>
+        </el-tooltip>
+      `,
+
+      data() {
+        return { show: false };
+      }
+    }, true);
+    const tooltip = vm.$refs.tooltip;
+
+    it('showPopper is false', () => {
+      triggerEvent(tooltip.$el, 'mouseenter');
+      expect(tooltip.showPopper).to.false;
+    });
+    it('show', done => {
+      vm.show = true;
+      vm.$nextTick(_ => {
+        expect(tooltip.showPopper).to.true;
+        done();
+      });
+    });
+    it('still show when trigger mouseleave', () => {
+      triggerEvent(tooltip.$el, 'mouseleave');
+      expect(tooltip.showPopper).to.true;
+    });
+    it('hidden', done => {
+      vm.show = false;
+      vm.$nextTick(_ => {
+        expect(tooltip.showPopper).to.false;
+        done();
+      });
+    });
+  });
+
   describe('hover', () => {
     const vm = createVue(`
       <el-tooltip ref="tooltip" content="提示文字">
@@ -18,11 +56,11 @@ describe('Tooltip', () => {
     `);
     const tooltip = vm.$refs.tooltip;
 
-    tooltip.handleShowPopper();
+    triggerEvent(tooltip.$el, 'mouseenter');
     it('popperElm is exist', () => expect(tooltip.popperElm).to.exist);
     it('showPopper is true', () => expect(tooltip.showPopper).to.true);
     it('close popper', () => {
-      tooltip.handleClosePopper();
+      triggerEvent(tooltip.$el, 'mouseleave');
       expect(tooltip.showPopper).to.false;
     });
   });