Tooltip: add hide-after timeout for hiding tooltip (#6401)

* added hide-after timeout for hiding tooltip

* restored clearTimeout(this.timeout) in handleClosePopper()

examples/docs/en-US/tooltip.md

@@ -213,3 +213,4 @@ Disabled form elements are not supported in tooltip, see more information at [MD
 | manual | whether to control Tooltip manually. `mouseenter` and `mouseleave` won't have effects if set to `true` | boolean | — | false |
 |  popper-class  |  custom class name for Tooltip's popper | string | — | — |
 | enterable | whether the mouse can enter the tooltip | Boolean | — | true |
+| hide-after | timeout in milliseconds to hide tooltip | number | — | 0 |

packages/tooltip/src/main.js

@@ -39,11 +39,16 @@ export default {
     enterable: {
       type: Boolean,
       default: true
+    },
+    hideAfter: {
+      type: Number,
+      default: 0
     }
   },
 
   data() {
     return {
+      timeoutPending: null,
       handlerAdded: false
     };
   },
@@ -118,15 +123,28 @@ export default {
       this.timeout = setTimeout(() => {
         this.showPopper = true;
       }, this.openDelay);
+
+      if (this.hideAfter > 0) {
+        this.timeoutPending = setTimeout(() => {
+          this.showPopper = false;
+        }, this.hideAfter);
+      }
     },
 
     handleClosePopper() {
       if (this.enterable && this.expectedState || this.manual) return;
       clearTimeout(this.timeout);
+
+      if (this.timeoutPending) {
+        clearTimeout(this.timeoutPending);
+      }
       this.showPopper = false;
     },
 
     setExpectedState(expectedState) {
+      if (expectedState === false) {
+        clearTimeout(this.timeoutPending);
+      }
       this.expectedState = expectedState;
     }
   }