Merge pull request #47 from jezzdk/master

Added option for delay on mouseover
RobinCK · Jul 30, 2018 · 6eeb491 · 6eeb491
2 parents 352dc80 + 6e2a5e6
commit 6eeb491
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -121,6 +121,7 @@ npm run build
 | Props               | Type      | Default                                         | Description  |
 | --------------------|:----------| ------------------------------------------------|--------------|
 | disabled            | Boolean   | false                                           |   |
+| delay-on-mouse-over | Number    | 10                                              | Delay in ms before showing popper during a mouse over |
 | delay-on-mouse-out  | Number    | 10                                              | Delay in ms before hiding popper during a mouse out |
 | append-to-body      | Boolean   | false                                           |   |
 | visible-arrow       | Boolean   | true                                            |   |

diff --git a/src/component/popper.js.vue b/src/component/popper.js.vue
@@ -113,6 +113,10 @@
         default: 'hover',
         validator: value => ['click', 'hover'].indexOf(value) > -1
       },
+      delayOnMouseOver: {
+        type: Number,
+        default: 10,
+      },
       delayOnMouseOut: {
         type: Number,
         default: 10,
@@ -302,11 +306,14 @@
       },
 
       onMouseOver() {
-        this.showPopper = true;
         clearTimeout(this._timer);
+        this._timer = setTimeout(() => {
+          this.showPopper = true;
+        }, this.delayOnMouseOver);
       },
 
       onMouseOut() {
+        clearTimeout(this._timer);
         this._timer = setTimeout(() => {
           this.showPopper = false;
         }, this.delayOnMouseOut);