feat(tooltips): add delay prop

Author: joligoms

src/action-tooltip.svelte

@@ -32,6 +32,9 @@
   /** @type {string} */
   export let animation = '';
 
+  /** @type {number} */
+  export let delay = 200;
+
   /** @type {boolean} */
   export let arrow = true;
 
@@ -64,7 +67,7 @@
     left: 0
   };
 
-  const delay = animation ? 200 : 0;
+  const animationDelay = animation ? delay : 0;
 
   onMount(() => {
     if (tooltipRef !== null) {
@@ -97,7 +100,7 @@
       animationEffect = animation;
     }
 
-    setTimeout(() => (visible = true), delay);
+    setTimeout(() => (visible = true), animationDelay);
   });
 
   onDestroy(() => {
@@ -108,7 +111,7 @@
   });
 
   $: isComponent = typeof content === 'object';
-  $: tooltipRef && show ? setTimeout(() => (visible = true), delay) : (visible = false);
+  $: tooltipRef && show ? setTimeout(() => (visible = true), animationDelay) : (visible = false);
 </script>
 
 {#if content}

src/action-tooltip.svelte.d.ts

@@ -19,6 +19,12 @@ export interface ComponentProps {
    */
   animation?: string;
 
+  /**
+   * The animation's delay of the tooltip.
+   * @default 200
+   */
+  delay?: number;
+
   /**
    * Whether to show the arrow of the tooltip.
    * @default true

src/tooltip.svelte

@@ -29,6 +29,9 @@
   /** @type {string} */
   export let animation = '';
 
+  /** @type {number} */
+  export let delay = 200;
+
   /** @type {boolean} */
   export let arrow = true;
 
@@ -79,7 +82,7 @@
   };
 
   const onShow = () => {
-    const delay = animation ? 200 : 0;
+    const animationDelay = animation ? delay : 0;
 
     // @ts-ignore
     if (autoPosition && !isElementInViewport(containerRef, tooltipRef, position)) {
@@ -93,7 +96,7 @@
       animationEffect = animation;
     }
 
-    timer = setTimeout(() => (visible = true), delay);
+    timer = setTimeout(() => (visible = true), animationDelay);
   };
 
   const onHide = () => {

src/tooltip.svelte.d.ts

@@ -19,6 +19,12 @@ export interface ComponentProps {
    */
   animation?: string;
 
+  /**
+   * The animation's delay of the tooltip.
+   * @default 200
+   */
+  delay?: number;
+
   /**
    * Whether to show the arrow of the tooltip.
    * @default true