From 93fc49b4815f9c81d490e281ab7a6e8da3c13ea4 Mon Sep 17 00:00:00 2001
From: kiosion <hi@kio.dev>
Date: Fri, 16 Feb 2024 04:06:28 -0500
Subject: [PATCH] feat: Replace tippy with custom tooltip component

---
 svelte-app/package.json                       |   1 -
 svelte-app/pnpm-lock.yaml                     |  13 --
 svelte-app/src/components/code-block.svelte   |   4 +-
 .../controls/language-toggle.svelte           |   4 +-
 .../components/controls/theme-toggle.svelte   |   4 +-
 svelte-app/src/components/footer.svelte       |  11 +-
 svelte-app/src/components/link.svelte         |   3 +-
 .../components/portable-text/footnote.svelte  |   4 +-
 .../portable-text/portable-text.svelte        |   4 +-
 svelte-app/src/components/tooltip.svelte      |  90 ------------
 .../src/components/tooltips/inner.svelte      | 137 ++++++++++++++++++
 .../src/components/tooltips/manager.svelte    |   9 ++
 .../src/components/tooltips/tooltip.svelte    |  91 ++++++++++++
 svelte-app/src/lib/tooltips.ts                |  44 ++++++
 svelte-app/src/routes/+layout.svelte          |   3 +
 15 files changed, 297 insertions(+), 125 deletions(-)
 delete mode 100644 svelte-app/src/components/tooltip.svelte
 create mode 100644 svelte-app/src/components/tooltips/inner.svelte
 create mode 100644 svelte-app/src/components/tooltips/manager.svelte
 create mode 100644 svelte-app/src/components/tooltips/tooltip.svelte
 create mode 100644 svelte-app/src/lib/tooltips.ts

diff --git a/svelte-app/package.json b/svelte-app/package.json
index 65d401cc9..c65ea0211 100644
--- a/svelte-app/package.json
+++ b/svelte-app/package.json
@@ -56,7 +56,6 @@
     "svelte-eslint-parser": "0.33.1",
     "svelte-highlight": "7.6.0",
     "tailwindcss": "3.4.1",
-    "tippy.js": "6.3.7",
     "twemoji": "14.0.2",
     "typescript": "5.3.3",
     "vite": "5.1.1",
diff --git a/svelte-app/pnpm-lock.yaml b/svelte-app/pnpm-lock.yaml
index d4083c504..0f148956a 100644
--- a/svelte-app/pnpm-lock.yaml
+++ b/svelte-app/pnpm-lock.yaml
@@ -113,9 +113,6 @@ devDependencies:
   tailwindcss:
     specifier: 3.4.1
     version: 3.4.1
-  tippy.js:
-    specifier: 6.3.7
-    version: 6.3.7
   twemoji:
     specifier: 14.0.2
     version: 14.0.2
@@ -1444,10 +1441,6 @@ packages:
     resolution: {integrity: sha512-2LuNTFBIO0m7kKIQvvPHN6UE63VjpmL9rnEEaOOaiSPbZK+zUOYIzBAWcED+3XYzhYsd/0mD57VdxAEqqV52CQ==}
     dev: true
 
-  /@popperjs/core@2.11.6:
-    resolution: {integrity: sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==}
-    dev: true
-
   /@portabletext/svelte@2.1.5(svelte@4.2.10):
     resolution: {integrity: sha512-NDHIT6TRPnWCGnr0VjwsmYtuhZRVkD41aexajtElwsVLSoYUf/mxXd6PVxjg1e12DfubQo4aQv6lpRthIVbIIA==}
     peerDependencies:
@@ -9879,12 +9872,6 @@ packages:
     engines: {node: '>=14.0.0'}
     dev: true
 
-  /tippy.js@6.3.7:
-    resolution: {integrity: sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==}
-    dependencies:
-      '@popperjs/core': 2.11.6
-    dev: true
-
   /tmp-promise@3.0.3:
     resolution: {integrity: sha512-RwM7MoPojPxsOBYnyd2hy0bxtIlVrihNs9pj5SUvY8Zz1sQcQG2tG1hSr8PDxfgEB8RNKDhqbIlroIarSNDNsQ==}
     dependencies:
diff --git a/svelte-app/src/components/code-block.svelte b/svelte-app/src/components/code-block.svelte
index 0f36dd3a6..87ca6c5be 100644
--- a/svelte-app/src/components/code-block.svelte
+++ b/svelte-app/src/components/code-block.svelte
@@ -9,7 +9,7 @@
   import { genericAsyncImport, getLangType } from '$components/code-block/imports';
   import Icon from '$components/icon.svelte';
   import Spinner from '$components/loading/spinner.svelte';
-  import Tooltip from '$components/tooltip.svelte';
+  import Tooltip from '$components/tooltips/tooltip.svelte';
 
   import type { ResolvedComponentType } from '$components/code-block/imports';
   import type { Unsubscriber } from 'svelte/store';
@@ -110,7 +110,7 @@
       {filename}
     </div>
   {/if}
-  <Tooltip text={$t('Copy to clipboard')} delay={200} offset={[0, 2]} fixed>
+  <Tooltip text={$t('Copy to clipboard')} delay={200} offset={[0, 2]}>
     <button
       class="focusOutline-sm absolute right-0 top-0 z-[2] cursor-pointer rounded-sm pb-3 pl-3 pr-4 pt-4 text-dark/60 hover:text-dark/80 dark:text-light/60 dark:hover:text-light/80"
       on:click={() => copy()}
diff --git a/svelte-app/src/components/controls/language-toggle.svelte b/svelte-app/src/components/controls/language-toggle.svelte
index 6109e247c..f55792a88 100644
--- a/svelte-app/src/components/controls/language-toggle.svelte
+++ b/svelte-app/src/components/controls/language-toggle.svelte
@@ -6,7 +6,7 @@
 
   import Hoverable from '$components/hoverable.svelte';
   import Icon from '$components/icon.svelte';
-  import Tooltip from '$components/tooltip.svelte';
+  import Tooltip from '$components/tooltips/tooltip.svelte';
 
   const handleClick = (event: Event, lang: (typeof APP_LANGS)[number]) => {
     event.preventDefault();
@@ -27,8 +27,6 @@
 <Hoverable>
   <Tooltip
     text={$t($currentLang === APP_LANGS[0] ? 'Switch to French' : 'Switch to English')}
-    delay={150}
-    fixed
   >
     <button
       aria-label={$t(
diff --git a/svelte-app/src/components/controls/theme-toggle.svelte b/svelte-app/src/components/controls/theme-toggle.svelte
index acbdf978c..5b0e773b0 100644
--- a/svelte-app/src/components/controls/theme-toggle.svelte
+++ b/svelte-app/src/components/controls/theme-toggle.svelte
@@ -5,7 +5,7 @@
 
   import Hoverable from '$components/hoverable.svelte';
   import Icon from '$components/icon.svelte';
-  import Tooltip from '$components/tooltip.svelte';
+  import Tooltip from '$components/tooltips/tooltip.svelte';
 
   const { theme } = Settings;
 
@@ -13,7 +13,7 @@
 </script>
 
 <Hoverable>
-  <Tooltip text={$t(tooltipText)} delay={150} fixed>
+  <Tooltip text={$t(tooltipText)}>
     <button
       aria-label={$t(tooltipText)}
       data-test-id="theme-toggle"
diff --git a/svelte-app/src/components/footer.svelte b/svelte-app/src/components/footer.svelte
index 493586707..74adc716b 100644
--- a/svelte-app/src/components/footer.svelte
+++ b/svelte-app/src/components/footer.svelte
@@ -5,7 +5,7 @@
   import Divider from '$components/divider.svelte';
   import Icon from '$components/icon.svelte';
   import BaseLink from '$components/nav/base-link.svelte';
-  import Tooltip from '$components/tooltip.svelte';
+  import Tooltip from '$components/tooltips/tooltip.svelte';
 
   import type { SiteConfig } from '$types';
 
@@ -26,7 +26,7 @@
     {#if socials?.length}
       <div>
         {#each socials as social, i}
-          <Tooltip text={social.url} delay={500} position="top" fixed>
+          <Tooltip text={social.url} delay={500} position="top">
             <BaseLink
               text={social.name}
               href={social.url}
@@ -43,12 +43,7 @@
     {/if}
     {#if APP_VERSION?.length}
       <div>
-        <Tooltip
-          text={$t('View latest commit on GitHub')}
-          position="top"
-          delay={150}
-          fixed
-        >
+        <Tooltip text={$t('View latest commit on GitHub')} position="top">
           <BaseLink
             target="_blank"
             rel="noopener noreferrer"
diff --git a/svelte-app/src/components/link.svelte b/svelte-app/src/components/link.svelte
index 609b09da7..c0a2f13e9 100644
--- a/svelte-app/src/components/link.svelte
+++ b/svelte-app/src/components/link.svelte
@@ -4,7 +4,7 @@
   import { linkTo, t } from '$lib/i18n';
 
   import Hoverable from '$components/hoverable.svelte';
-  import Tooltip from '$components/tooltip.svelte';
+  import Tooltip from '$components/tooltips/tooltip.svelte';
 
   const dispatch = createEventDispatcher(),
     type = $$props.href ? 'a' : 'button';
@@ -20,7 +20,6 @@
   <Tooltip
     text={link?.length > 50 ? `${link.slice(0, 50)}...` : link ?? $t('Visit')}
     delay={500}
-    fixed
   >
     <svelte:element
       this={type}
diff --git a/svelte-app/src/components/portable-text/footnote.svelte b/svelte-app/src/components/portable-text/footnote.svelte
index 57a8ce3f2..87fc6c3f4 100644
--- a/svelte-app/src/components/portable-text/footnote.svelte
+++ b/svelte-app/src/components/portable-text/footnote.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { t } from '$lib/i18n';
 
-  import Tooltip from '$components/tooltip.svelte';
+  import Tooltip from '$components/tooltips/tooltip.svelte';
 
   import type { MarkComponentProps } from '@portabletext/svelte';
   import type {
@@ -38,7 +38,7 @@
 
 <span>
   <slot />&nbsp;
-  <Tooltip text={$t('Go to footnote')} delay={200}>
+  <Tooltip text={$t('Go to footnote')}>
     <sup
       ><a
         href={`#note-${portableText.value._key}`}
diff --git a/svelte-app/src/components/portable-text/portable-text.svelte b/svelte-app/src/components/portable-text/portable-text.svelte
index 93e7866e4..90f7628db 100644
--- a/svelte-app/src/components/portable-text/portable-text.svelte
+++ b/svelte-app/src/components/portable-text/portable-text.svelte
@@ -20,7 +20,7 @@
   import NullMark from '$components/portable-text/serializers/null-mark.svelte';
   import OlWrapper from '$components/portable-text/serializers/ol-wrapper.svelte';
   import UlWrapper from '$components/portable-text/serializers/ul-wrapper.svelte';
-  import Tooltip from '$components/tooltip.svelte';
+  import Tooltip from '$components/tooltips/tooltip.svelte';
 
   import { PortableText } from '@portabletext/svelte';
 
@@ -143,7 +143,7 @@
               <li class="list-item">
                 <span class="flex flex-row flex-wrap items-center break-all">
                   <svelte:self text={note.note} plaintext />
-                  <Tooltip text={$t('Go to footnote source')} delay={200}>
+                  <Tooltip text={$t('Go to footnote source')}>
                     <a
                       class="ml-2"
                       href={`#src-${note._key}`}
diff --git a/svelte-app/src/components/tooltip.svelte b/svelte-app/src/components/tooltip.svelte
deleted file mode 100644
index 927d74dc6..000000000
--- a/svelte-app/src/components/tooltip.svelte
+++ /dev/null
@@ -1,90 +0,0 @@
-<script lang="ts">
-  import { onDestroy, onMount } from 'svelte';
-
-  import Logger from '$lib/logger';
-
-  import tippy, { followCursor } from 'tippy.js';
-
-  import type { Instance, Placement } from 'tippy.js';
-
-  export let text = '',
-    position: Placement = 'bottom',
-    transitionDuration = 200,
-    delay = 1400,
-    disable = false,
-    offset = [0, 12] as [number, number],
-    fixed = false;
-
-  let container: HTMLSpanElement, instance: Instance;
-
-  onMount(() => {
-    let target = container?.firstChild as HTMLElement | null;
-
-    if (target && window?.getComputedStyle(target).display === 'contents') {
-      target = target?.firstChild as HTMLElement | null;
-    }
-
-    if (target) {
-      if (!disable) {
-        instance = tippy(target, {
-          content: createContent(text),
-          allowHTML: true,
-          duration: transitionDuration,
-          delay: [delay, 0],
-          touch: ['hold', 500],
-          offset: fixed ? offset : [6, 24],
-          animation: 'fade',
-          placement: position,
-          followCursor: !fixed,
-          plugins: [followCursor]
-        });
-      }
-    } else {
-      Logger.error('Tooltip target not found!');
-    }
-  });
-
-  onDestroy(() => instance?.destroy?.());
-
-  const createContent = (content: string) => {
-    const div = document.createElement('div');
-    div.innerText = content;
-    div.classList.add(
-      'tooltip',
-      'rounded-sm',
-      'py-1',
-      'px-2',
-      'bg-black',
-      'text-light',
-      'dark:bg-light',
-      'dark:text-dark',
-      'font-code',
-      'text-sm'
-    );
-    return div;
-  };
-
-  $: if (text !== (instance?.props.content as Element | undefined)?.textContent) {
-    instance?.setContent(createContent(text));
-  }
-  $: if (!disable) {
-    instance?.enable();
-  } else {
-    instance?.disable();
-  }
-</script>
-
-<span class="contents h-fit w-fit" data-test-id="tooltip-container" bind:this={container}>
-  <slot />
-</span>
-
-<style lang="scss">
-  :global(.tippy-box[data-animation='fade'][data-state='hidden']) {
-    opacity: 0;
-    will-change: opacity;
-  }
-  :global(.tippy-box[data-animation='fade'][data-state='visible']) {
-    opacity: 1;
-    will-change: opacity;
-  }
-</style>
diff --git a/svelte-app/src/components/tooltips/inner.svelte b/svelte-app/src/components/tooltips/inner.svelte
new file mode 100644
index 000000000..da3976080
--- /dev/null
+++ b/svelte-app/src/components/tooltips/inner.svelte
@@ -0,0 +1,137 @@
+<script lang="ts">
+  import { onDestroy, onMount, tick } from 'svelte';
+  import { cubicInOut } from 'svelte/easing';
+  import { fade } from 'svelte/transition';
+
+  import { browser } from '$app/environment';
+
+  import type { Tooltip } from '$lib/tooltips';
+
+  export let id: Tooltip['id'],
+    content: Tooltip['content'],
+    duration: Tooltip['duration'],
+    placement: Tooltip['placement'],
+    followCursor: Tooltip['followCursor'],
+    offset: Tooltip['offset'],
+    target: Tooltip['target'];
+
+  onMount(() => {
+    if (followCursor && target) {
+      target.addEventListener('mousemove', calculatePosition);
+    }
+
+    calculatePosition();
+  });
+
+  onDestroy(() => {
+    if (followCursor && target) {
+      target.removeEventListener('mousemove', calculatePosition);
+    }
+  });
+
+  let tooltipElement: HTMLDivElement,
+    position = { x: 0, y: 0 };
+
+  const calculatePosition = async (e?: MouseEvent) => {
+    if (!browser || !target || !tooltipElement) {
+      return;
+    }
+
+    await tick();
+
+    const tooltipRect = tooltipElement.getBoundingClientRect();
+    const targetRect = target.getBoundingClientRect();
+    const { innerWidth, innerHeight } = window;
+
+    if (followCursor && e) {
+      position = {
+        x: Math.max(0, Math.min(innerWidth, e.clientX + offset[0])),
+        y: Math.max(0, Math.min(innerHeight, e.clientY + offset[1]))
+      };
+
+      return;
+    }
+
+    let x = 0,
+      y = 0;
+
+    switch (placement) {
+      case 'top':
+        x = targetRect.left + targetRect.width / 2 - tooltipRect.width / 2;
+        y = targetRect.top - targetRect.height - tooltipRect.height;
+        break;
+      case 'bottom':
+        x = targetRect.left + targetRect.width / 2 - tooltipRect.width / 2;
+        y = targetRect.top + targetRect.height;
+        break;
+      case 'left':
+        x = targetRect.left;
+        y = targetRect.top + targetRect.height / 2 - tooltipRect.height / 2;
+        break;
+      case 'right':
+        x = targetRect.left + targetRect.width;
+        y = targetRect.top + targetRect.height / 2 - tooltipRect.height / 2;
+        break;
+      case 'top-start':
+        x = targetRect.left;
+        y = targetRect.top;
+        break;
+      case 'top-end':
+        x = targetRect.left + targetRect.width;
+        y = targetRect.top;
+        break;
+      case 'bottom-start':
+        x = targetRect.left;
+        y = targetRect.top + targetRect.height;
+        break;
+      case 'bottom-end':
+        x = targetRect.left + targetRect.width;
+        y = targetRect.top + targetRect.height;
+        break;
+      case 'left-start':
+        x = targetRect.left;
+        y = targetRect.top;
+        break;
+      case 'left-end':
+        x = targetRect.left;
+        y = targetRect.top + targetRect.height;
+        break;
+      case 'right-start':
+        x = targetRect.left + targetRect.width;
+        y = targetRect.top;
+        break;
+      case 'right-end':
+        x = targetRect.left + targetRect.width;
+        y = targetRect.top + targetRect.height;
+        break;
+    }
+
+    position = {
+      x: Math.max(0, Math.min(innerWidth, x + offset[0])),
+      y: Math.max(0, Math.min(innerHeight, y + offset[1]))
+    };
+  };
+
+  $: calculatePosition(), [target, tooltipElement, placement, followCursor];
+  $: style = `left: ${position.x}px; top: ${position.y}px;`;
+</script>
+
+<div {style} class="tooltip" id={`tooltip-${id}`} bind:this={tooltipElement}>
+  <span class="tooltip-content" transition:fade={{ duration, easing: cubicInOut }}>
+    {content}
+  </span>
+</div>
+
+<style lang="scss">
+  div {
+    @apply pointer-events-none fixed z-50;
+  }
+
+  span {
+    @apply block max-w-56 rounded-sm bg-black px-2 py-1 font-code text-sm text-light;
+
+    :global(.dark) & {
+      @apply bg-light text-dark;
+    }
+  }
+</style>
diff --git a/svelte-app/src/components/tooltips/manager.svelte b/svelte-app/src/components/tooltips/manager.svelte
new file mode 100644
index 000000000..6812190b6
--- /dev/null
+++ b/svelte-app/src/components/tooltips/manager.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+  import { tooltips } from '$lib/tooltips';
+
+  import TooltipInner from '$components/tooltips/inner.svelte';
+</script>
+
+{#each $tooltips.entries() as [_, tooltip]}
+  <TooltipInner {...tooltip} />
+{/each}
diff --git a/svelte-app/src/components/tooltips/tooltip.svelte b/svelte-app/src/components/tooltips/tooltip.svelte
new file mode 100644
index 000000000..382be8b9b
--- /dev/null
+++ b/svelte-app/src/components/tooltips/tooltip.svelte
@@ -0,0 +1,91 @@
+<script lang="ts">
+  import { onDestroy, onMount } from 'svelte';
+
+  import Logger from '$lib/logger';
+  import { createTooltip, destroyTooltip } from '$lib/tooltips';
+
+  import type { Tooltip } from '$lib/tooltips';
+
+  export let text: Tooltip['content'],
+    duration: Tooltip['duration'] = 200,
+    delay = 150,
+    position: Tooltip['placement'] = 'bottom',
+    fixed: Tooltip['followCursor'] = true,
+    offset: Tooltip['offset'] = [0, 12];
+
+  let tooltipId = Math.floor(Math.random() * 100000),
+    timeoutId: ReturnType<typeof setTimeout>,
+    container: HTMLSpanElement,
+    target: HTMLElement | null;
+
+  const showTooltip = () => {
+    if (!target || !text?.trim()) {
+      return;
+    }
+
+    clearTimeout(timeoutId);
+
+    timeoutId = setTimeout(
+      () => {
+        createTooltip({
+          id: tooltipId,
+          content: text,
+          duration,
+          placement: position,
+          followCursor: !fixed,
+          offset,
+          target: target as HTMLElement
+        });
+      },
+      Math.max(0, delay - 50)
+    );
+  };
+
+  const hideTooltip = () => {
+    clearTimeout(timeoutId);
+    destroyTooltip(tooltipId);
+  };
+
+  const getActionableTarget = (el: HTMLElement | null): HTMLElement | null => {
+    if (el && getComputedStyle(el)?.display === 'contents') {
+      return getActionableTarget(el?.firstChild as HTMLElement | null);
+    }
+
+    return el;
+  };
+
+  onMount(() => {
+    target = getActionableTarget(container?.firstChild as HTMLElement | null);
+
+    if (!target) {
+      Logger.error('Tooltip target not found!');
+      return;
+    }
+
+    target.addEventListener('mouseenter', showTooltip);
+    target.addEventListener('mouseleave', hideTooltip);
+    target.addEventListener('focusin', showTooltip);
+    target.addEventListener('focusout', hideTooltip);
+    target.addEventListener('blur', hideTooltip);
+    target.addEventListener('click', hideTooltip);
+  });
+
+  onDestroy(() => {
+    hideTooltip();
+
+    if (!target) {
+      return;
+    }
+
+    target.removeEventListener('mouseenter', showTooltip);
+    target.removeEventListener('mouseleave', hideTooltip);
+    target.removeEventListener('focusin', showTooltip);
+    target.removeEventListener('focusout', hideTooltip);
+    target.removeEventListener('blur', hideTooltip);
+    target.removeEventListener('click', hideTooltip);
+  });
+</script>
+
+<span bind:this={container} class="contents" data-test-id="tooltip-container">
+  <slot />
+</span>
diff --git a/svelte-app/src/lib/tooltips.ts b/svelte-app/src/lib/tooltips.ts
new file mode 100644
index 000000000..981545248
--- /dev/null
+++ b/svelte-app/src/lib/tooltips.ts
@@ -0,0 +1,44 @@
+import { writable } from 'svelte/store';
+
+type Placement =
+  | 'top'
+  | 'bottom'
+  | 'left'
+  | 'right'
+  | 'top-start'
+  | 'top-end'
+  | 'bottom-start'
+  | 'bottom-end'
+  | 'left-start'
+  | 'left-end'
+  | 'right-start'
+  | 'right-end';
+
+export type Tooltip = {
+  id: number;
+  content: string;
+  duration: number;
+  placement: Placement;
+  followCursor: boolean;
+  target: HTMLElement;
+  offset: [number, number];
+};
+
+const tooltips = writable<Map<number, Tooltip>>(new Map());
+
+const createTooltip = (data: Tooltip) => {
+  tooltips.update((t) => {
+    t.set(data.id, data);
+    return t;
+  });
+  return data.id;
+};
+
+const destroyTooltip = (id: number) => {
+  tooltips.update((t) => {
+    t.delete(id);
+    return t;
+  });
+};
+
+export { createTooltip, destroyTooltip, tooltips };
diff --git a/svelte-app/src/routes/+layout.svelte b/svelte-app/src/routes/+layout.svelte
index 8848a8b09..403ddd22b 100644
--- a/svelte-app/src/routes/+layout.svelte
+++ b/svelte-app/src/routes/+layout.svelte
@@ -26,6 +26,7 @@
   import PageContent from '$components/layouts/page-content.svelte';
   import PageTransition from '$components/layouts/page-transition.svelte';
   import ScrollContainer from '$components/layouts/scroll-container.svelte';
+  import TooltipManager from '$components/tooltips/manager.svelte';
 
   import type { Unsubscriber } from 'svelte/store';
 
@@ -143,6 +144,8 @@
   </ScrollContainer>
 </div>
 
+<TooltipManager />
+
 <style lang="scss">
   @import '@styles/mixins';
   @import '@styles/variables';