diff --git a/examples/docs/en-US/tooltip.md b/examples/docs/en-US/tooltip.md index bcd68a730..d3fed443c 100644 --- a/examples/docs/en-US/tooltip.md +++ b/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 | diff --git a/packages/tooltip/src/main.js b/packages/tooltip/src/main.js index be2993358..3ec0638fe 100644 --- a/packages/tooltip/src/main.js +++ b/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; } }