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

* added hide-after timeout for hiding tooltip

* restored clearTimeout(this.timeout) in handleClosePopper()
pull/7028/head
ryatziv 2017-09-13 19:45:25 -07:00 committed by 杨奕
parent 2057604e24
commit 070f60c307
2 changed files with 19 additions and 0 deletions

View File

@ -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 |

View File

@ -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;
}
}