diff --git a/src/components/Tooltip/STooltip.vue b/src/components/Tooltip/STooltip.vue
index 78216257..11fea68e 100644
--- a/src/components/Tooltip/STooltip.vue
+++ b/src/components/Tooltip/STooltip.vue
@@ -13,7 +13,7 @@
:open-delay="openDelay"
:popper-class="computedPopperClass"
:manual="manual"
- :hide-after="closeDelay"
+ :hide-after="hideAfter"
:tabindex="tabindex"
>
@@ -105,6 +105,12 @@ export default class STooltip extends Mixins(BorderRadiusMixin, DesignSystemInje
* `0` by default
*/
@Prop({ default: 0, type: Number }) readonly closeDelay!: number
+ /**
+ * Timeout in milliseconds to hide tooltip after appearing.
+ *
+ * `0` by default
+ */
+ @Prop({ default: 0, type: Number }) readonly hideAfter!: number
/**
* Tabindex of the tooltip.
*
@@ -142,12 +148,13 @@ export default class STooltip extends Mixins(BorderRadiusMixin, DesignSystemInje
this.$emit('change', value)
}
+ @Watch('closeDelay')
+ private handleChangeCloseDelay (value: number): void {
+ this.updateCloseDelay(value)
+ }
+
mounted (): void {
- const tooltip = this.tooltip
- if (!tooltip) {
- return
- }
- tooltip.debounceClose = debounce(200, tooltip.handleClosePopper)
+ this.updateCloseDelay(this.closeDelay)
}
get computedTheme (): string {
@@ -160,5 +167,13 @@ export default class STooltip extends Mixins(BorderRadiusMixin, DesignSystemInje
}
return this.theme
}
+
+ updateCloseDelay (value: number): void {
+ const tooltip = this.tooltip
+ if (!tooltip) {
+ return
+ }
+ tooltip.debounceClose = debounce(value, tooltip.handleClosePopper)
+ }
}
diff --git a/src/stories/STooltip.stories.ts b/src/stories/STooltip.stories.ts
index 02cab197..257cd16d 100644
--- a/src/stories/STooltip.stories.ts
+++ b/src/stories/STooltip.stories.ts
@@ -21,7 +21,9 @@ export const configurable = () => ({
:disabled="disabled"
:border-radius="borderRadius"
:offset="offset"
- :openDelay="openDelay"
+ :open-delay="openDelay"
+ :close-delay="closeDelay"
+ :hide-after="hideAfter"
@change="handleChange"
>
Custom tooltip
@@ -48,6 +50,12 @@ export const configurable = () => ({
},
openDelay: {
default: number('Open delay', 0)
+ },
+ closeDelay: {
+ default: number('Close delay', 0)
+ },
+ hideAfter: {
+ default: number('Hide after', 0)
}
},
methods: {