feat: Replace tippy with custom tooltip component

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",

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()}

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(

svelte-app/src/components/controls/theme-toggle.svelte

@@ -5,15 +5,15 @@
 
   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;
 
   $: tooltipText = $theme === APP_THEMES.LIGHT ? 'Use dark mode' : 'Use light mode';
 </script>
 
 <Hoverable>
-  <Tooltip text={$t(tooltipText)} delay={150} fixed>
+  <Tooltip text={$t(tooltipText)}>
     <button
       aria-label={$t(tooltipText)}
       data-test-id="theme-toggle"

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"

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}

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}`}

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}`}