From 2483b940fd2552d4afeb0e917c933fa940503a55 Mon Sep 17 00:00:00 2001
From: Nikita-Polyakov <polyakov@soramitsu.co.jp>
Date: Mon, 9 Aug 2021 15:24:43 +0300
Subject: [PATCH] tooltip close delay & hide after props

---
 src/components/Tooltip/STooltip.vue | 27 +++++++++++++++++++++------
 src/stories/STooltip.stories.ts     | 10 +++++++++-
 2 files changed, 30 insertions(+), 7 deletions(-)

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"
   >
     <slot slot="content" name="content"></slot>
@@ -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)
+  }
 }
 </script>
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"
                >
                  <s-button style="margin: 40px">Custom tooltip</s-button>
@@ -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: {