Merge pull request #22 from joligoms/feat/tooltips/add-delay-prop

feat(tooltips): add delay prop

Author: dysfunc

README.md

@@ -44,6 +44,7 @@ Checkout out my <u use:tooltip={{ content: 'Hello World!' }}>tooltip</u>
 | :----------- | :------------------------------------------------------------------ | :---------------------------------------------- |
 | action       | The action that triggers the tooltip (hover | click | prop)         | `string` (default: `hover`)                     |
 | animation    | The animation to apply to the tooltip                               | `string` (default: ``)                          |
+| delay        | The animation delay in milliseconds to apply to the tooltip         | `number` (default: `200`)                       |
 | arrow        | If `false`, the tooltip arrow will not be shown.                    | `boolean` (default: `true`)                     |
 | autoPosition | Adjust tooltip position if viewport clipping occurs                 | `string` (default: `false`)                     |
 | content      | The string or object containing componentref and props              | `string` | `object` component (default: ``)     |

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