refactor(tooltips): add show prop to interface for manual control over showing and hiding

Author: dysfunc

src/action-tooltip.snap.js

@@ -10,6 +10,7 @@ exports[`Components: Tooltip should render the component 1`] = `
       Hello World!
       
     </div>
+    
   </div>
 </body>
 `;

src/action-tooltip.svelte

@@ -5,57 +5,76 @@
   import { formatVariableKey, getMinWidth, isInViewport } from './helpers';
   import { inverse } from './constants';
 
+  /** @type {'hover' | 'click' | 'prop' | string} */
   export let action = 'hover';
+
+  /** @type {string | {component: any, props?: Record<string, any>}} */
   export let content = '';
+
+  /** @type {'left' | string} */
   export let align = 'left';
+
+  /** @type {'top' | string} */
   export let position = 'top';
+
+  /** @type {number} */
   export let maxWidth = 200;
-  /**
-   * @type {{ [x: string]: any; } | null}
-   */
-   export let style = null;
+
+  /** @type {Record<string, string> | null} */
+  export let style = null;
+
+  /** @type {string} */
   export let theme = '';
+
+  /** @type {string} */
   export let animation = '';
+
+  /** @type {boolean} */
   export let arrow = true;
+
+  /** @type {boolean} */
   export let autoPosition = false;
 
-  /**
-   * @type {HTMLDivElement | null}
-   */
-  let ref = null;
+  /** @type {boolean} */
+  export let show = false;
+
+  /** @type {HTMLDivElement | null} */
+  let tooltipRef = null;
+
+  /** @type {number} */
   let minWidth = 0;
-  /**
-   * @type {{ $destroy: () => void; } | null}
-   */
+
+  /** @type {any} */
   let component = null;
-  /**
-   * @type {string | null}
-   */
+
+  /** @type {string | null} */
   let animationEffect = null;
-  let show = false;
 
-  onMount(() => {
-    const delay = animation ? 200 : 0;
+  /** @type {boolean} */
+  let visible = false;
 
-    if (ref !== null) {
+  const delay = animation ? 200 : 0;
+
+  onMount(() => {
+    if (tooltipRef !== null) {
       if (isComponent && !component) {
         // @ts-ignore
-        component = new content.component({ target: ref, props: { action, ...content.props } });
+        component = new content.component({ target: tooltipRef, props: { action, ...content.props } });
       }
 
-      minWidth = getMinWidth(ref, maxWidth);
+      minWidth = getMinWidth(tooltipRef, maxWidth);
 
       if (style && typeof style === 'object') {
         for (let prop in style) {
           const key = formatVariableKey(prop);
           const value = style[prop];
 
-          ref.style.setProperty(`--tooltip-${key}`, value);
+          tooltipRef.style.setProperty(`--tooltip-${key}`, value);
         }
       }
     }
 
-    if (autoPosition && !isInViewport(ref)) {
+    if (autoPosition && !isInViewport(tooltipRef)) {
       // @ts-ignore
       position = inverse[position];
     }
@@ -64,7 +83,7 @@
       animationEffect = animation;
     }
 
-    setTimeout(() => (show = true), delay);
+    setTimeout(() => (visible = true), delay);
   });
 
   onDestroy(() => {
@@ -75,13 +94,14 @@
   });
 
   $: isComponent = typeof content === 'object';
+  $: tooltipRef && show ? setTimeout(() => (visible = true), delay) : (visible = false);
 </script>
 
 {#if content}
   <div
-    bind:this={ref}
+    bind:this={tooltipRef}
     class="tooltip animation-{animationEffect} {position} {theme}"
-    class:show
+    class:show={visible}
     class:arrowless={!arrow}
     style="min-width: {minWidth}px; max-width: {maxWidth}px; text-align: {align};"
   >

src/action-tooltip.svelte.d.ts

@@ -2,53 +2,70 @@ import type { SvelteComponentTyped } from 'svelte';
 
 export interface ComponentProps {
   /**
-   * The content of the tooltip.
-   * @default ''
+   * The action to trigger the tooltip
+   * @default 'hover'
    */
-  content?: string;
+  action: 'hover' | 'click' | 'prop' | string;
 
   /**
-   * The position of the tooltip.
-   * Allowed values are 'top', 'bottom', 'left' or 'right'.
-   * @default 'top'
+   * The alignment of the tooltip.
+   * @default 'left'
    */
-  position?: string;
+  align?: 'left' | 'right' | 'center' | string;
 
   /**
-   * The maximum width of the tooltip.
-   * @default 200
+   * The animation style of the tooltip.
+   * @default ''
    */
-  maxWidth?: number;
+  animation?: string;
 
   /**
-   * The style of the tooltip.
-   * @default null
+   * Whether to show the arrow of the tooltip.
+   * @default true
    */
-  style?: undefined;
+  arrow?: boolean;
 
   /**
-   * The theme of the tooltip.
-   * @default ''
+   * Whether to automatically position the tooltip when clipping occurs.
+   * @default false
    */
-  theme?: string;
+  autoPosition?: boolean;
 
   /**
-   * The animation style of the tooltip.
+   * The content of the tooltip.
    * @default ''
    */
-  animation?: string;
+  content?: string;
 
   /**
-   * Whether to show the arrow of the tooltip.
-   * @default true
+   * The maximum width of the tooltip.
+   * @default 200
    */
-  arrow?: boolean;
+  maxWidth?: number;
 
   /**
-   * Whether to automatically position the tooltip.
+   * The position of the tooltip.
+   * @default 'top'
+   */
+  position?: 'bottom' | 'left' | 'right' | 'top' | string;
+
+  /**
+   * Control the visibility of the tooltip.
    * @default false
    */
-  autoPosition?: boolean;
+  show?: boolean;
+
+  /**
+   * The style of the tooltip.
+   * @default null
+   */
+  style?: undefined;
+
+  /**
+   * The theme of the tooltip.
+   * @default ''
+   */
+  theme?: string;
 }
 
 export default class Component extends SvelteComponentTyped<

src/action.js

@@ -1,7 +1,6 @@
 import Tooltip from './action-tooltip.svelte';
 
 export const tooltip = (element, props) => {
-
   let component = null;
   let title = element.getAttribute('title');
   let action = props?.action || element.getAttribute('action') || 'hover';
@@ -17,13 +16,13 @@ export const tooltip = (element, props) => {
 
   const onClick = () => {
     if (component) {
-      onMouseLeave();
+      onHide();
     } else {
-      onMouseEnter();
+      onShow();
     }
   };
 
-  const onMouseEnter = () => {
+  const onShow = () => {
     if (!component) {
       component = new Tooltip({
         target: element,
@@ -32,7 +31,7 @@ export const tooltip = (element, props) => {
     }
   };
 
-  const onMouseLeave = () => {
+  const onHide = () => {
     if (component) {
       component.$destroy();
       component = null;
@@ -45,25 +44,31 @@ export const tooltip = (element, props) => {
 
       if (action === 'click') {
         element.addEventListener('click', onClick);
-      } else {
-        element.addEventListener('mouseenter', onMouseEnter);
-        element.addEventListener('mouseleave', onMouseLeave);
+      }
+
+      if (action === 'hover') {
+        element.addEventListener('mouseenter', onShow);
+        element.addEventListener('mouseleave', onHide);
       }
     }
   }
 
   const removeListeners = () => {
     if (element !== null) {
       element.removeEventListener('click', onClick);
-      element.removeEventListener('mouseenter', onMouseEnter);
-      element.removeEventListener('mouseleave', onMouseLeave);
+      element.removeEventListener('mouseenter', onShow);
+      element.removeEventListener('mouseleave', onHide);
     }
   };
 
   addListeners();
 
   element.style.position = 'relative';
 
+  if (props.show) {
+    onShow();
+  }
+
   return {
     destroy() {
       removeListeners();

src/index.d.ts

@@ -1 +1,2 @@
-export { default } from "./tooltip.svelte";
+export { default as Tooltip } from './tooltip.svelte';
+export { tooltip } from './action';