From 042a30941779e56b4470761a27701b00df0301a4 Mon Sep 17 00:00:00 2001
From: kiosion <hi@kio.dev>
Date: Sun, 13 Oct 2024 21:45:55 -0400
Subject: [PATCH] refac: Tooltips, sidebar toggles

---
 svelte-app/package.json                       |   1 +
 svelte-app/pnpm-lock.yaml                     |  23 ++
 svelte-app/src/components/code-block.svelte   |   5 +-
 .../components/controls/base-toggle.svelte    |  40 +--
 .../components/document/content/header.svelte |   4 +-
 .../src/components/experiments/gol.svelte     |   2 +-
 .../components/experiments/mag-cursor.svelte  |   4 +-
 svelte-app/src/components/images/image.svelte |   4 +-
 svelte-app/src/components/link.svelte         |   9 +-
 .../src/components/nav/confetti-piece.svelte  |  39 ---
 svelte-app/src/components/nav/confetti.svelte |  18 --
 .../src/components/nav/header-logo.svelte     |  35 ---
 .../components/portable-text/footnote.svelte  |   2 +-
 .../portable-text/portable-text.svelte        |   2 +-
 svelte-app/src/components/sidebar.svelte      |  18 +-
 .../sidebar/sidebar-headings.svelte           |   8 +-
 .../sidebar-link.svelte}                      |  32 ++-
 .../components/sidebar/sidebar-tooltip.svelte |  42 ++++
 svelte-app/src/components/sidebar/tooltips.ts |   3 +
 .../src/components/tooltips/inner.svelte      | 231 ++++++++----------
 .../src/components/tooltips/manager.svelte    |  11 -
 .../src/components/tooltips/tooltip.svelte    | 110 +++++----
 svelte-app/src/lib/tooltips.ts                |  61 -----
 svelte-app/src/routes/+layout.svelte          |   5 +-
 24 files changed, 307 insertions(+), 402 deletions(-)
 delete mode 100644 svelte-app/src/components/nav/confetti-piece.svelte
 delete mode 100644 svelte-app/src/components/nav/confetti.svelte
 delete mode 100644 svelte-app/src/components/nav/header-logo.svelte
 rename svelte-app/src/components/{nav/header-link.svelte => sidebar/sidebar-link.svelte} (69%)
 create mode 100644 svelte-app/src/components/sidebar/sidebar-tooltip.svelte
 create mode 100644 svelte-app/src/components/sidebar/tooltips.ts
 delete mode 100644 svelte-app/src/components/tooltips/manager.svelte
 delete mode 100644 svelte-app/src/lib/tooltips.ts

diff --git a/svelte-app/package.json b/svelte-app/package.json
index 7e51646e4..b954d31ad 100644
--- a/svelte-app/package.json
+++ b/svelte-app/package.json
@@ -21,6 +21,7 @@
     "lint": "pnpm format && pnpm eslint --fix \"./src/**/*.{ts,svelte}\" \"./types/**/*.ts\""
   },
   "devDependencies": {
+    "@floating-ui/dom": "^1.6.11",
     "@playwright/test": "1.44.1",
     "@portabletext/svelte": "2.1.11",
     "@portabletext/toolkit": "2.0.15",
diff --git a/svelte-app/pnpm-lock.yaml b/svelte-app/pnpm-lock.yaml
index 2172e1569..8c105ac63 100644
--- a/svelte-app/pnpm-lock.yaml
+++ b/svelte-app/pnpm-lock.yaml
@@ -8,6 +8,9 @@ importers:
 
   .:
     devDependencies:
+      '@floating-ui/dom':
+        specifier: ^1.6.11
+        version: 1.6.11
       '@playwright/test':
         specifier: 1.44.1
         version: 1.44.1
@@ -663,6 +666,15 @@ packages:
   '@fastify/static@7.0.4':
     resolution: {integrity: sha512-p2uKtaf8BMOZWLs6wu+Ihg7bWNBdjNgCwDza4MJtTqg+5ovKmcbgbR9Xs5/smZ1YISfzKOCNYmZV8LaCj+eJ1Q==}
 
+  '@floating-ui/core@1.6.8':
+    resolution: {integrity: sha512-7XJ9cPU+yI2QeLS+FCSlqNFZJq8arvswefkZrYI1yQBbftw6FyrZOxYSh+9S7z7TpeWlRt9zJ5IhM1WIL334jA==}
+
+  '@floating-ui/dom@1.6.11':
+    resolution: {integrity: sha512-qkMCxSR24v2vGkhYDo/UzxfJN3D4syqSjyuTFz6C7XcpU1pASPRieNI0Kj5VP3/503mOfYiGY891ugBX1GlABQ==}
+
+  '@floating-ui/utils@0.2.8':
+    resolution: {integrity: sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==}
+
   '@humanwhocodes/config-array@0.11.14':
     resolution: {integrity: sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==}
     engines: {node: '>=10.10.0'}
@@ -6383,6 +6395,17 @@ snapshots:
       fastq: 1.17.1
       glob: 10.4.1
 
+  '@floating-ui/core@1.6.8':
+    dependencies:
+      '@floating-ui/utils': 0.2.8
+
+  '@floating-ui/dom@1.6.11':
+    dependencies:
+      '@floating-ui/core': 1.6.8
+      '@floating-ui/utils': 0.2.8
+
+  '@floating-ui/utils@0.2.8': {}
+
   '@humanwhocodes/config-array@0.11.14':
     dependencies:
       '@humanwhocodes/object-schema': 2.0.3
diff --git a/svelte-app/src/components/code-block.svelte b/svelte-app/src/components/code-block.svelte
index c829dc738..ffd80a76f 100644
--- a/svelte-app/src/components/code-block.svelte
+++ b/svelte-app/src/components/code-block.svelte
@@ -83,10 +83,11 @@
 </script>
 
 <div
-  class="relative mx-7 my-5 overflow-hidden rounded-lg bg-neutral-200/50 transition-colors dark:bg-neutral-700"
+  class="mx-7 my-5 rounded-lg bg-neutral-200/50 transition-colors dark:bg-neutral-700"
   role="group"
   aria-label={$t('Code block')}
   aria-labelledby={filename ? `${id}-filename` : undefined}
+  style="content-visibility: auto"
 >
   {#if filename}
     <div
@@ -99,7 +100,7 @@
     <Divider margin="my-0"></Divider>
   {/if}
 
-  <Tooltip text={$t('Copy to clipboard')} position="top">
+  <Tooltip content={$t('Copy to clipboard')} placement="left">
     <button
       class="focus-outline-sm absolute right-0 z-[2] mr-2.5 mt-2 cursor-pointer rounded-md px-2 py-1.5 font-mono text-xs text-dark/80 transition-colors hover:bg-neutral-300/50 hover:text-dark focus-visible:bg-neutral-300/50 focus-visible:text-dark dark:text-light/80 hover:dark:bg-neutral-500 hover:dark:text-light focus-visible:dark:bg-neutral-500 focus-visible:dark:text-light"
       class:top-1={!filename}
diff --git a/svelte-app/src/components/controls/base-toggle.svelte b/svelte-app/src/components/controls/base-toggle.svelte
index 33be9ce3b..0404e27c8 100644
--- a/svelte-app/src/components/controls/base-toggle.svelte
+++ b/svelte-app/src/components/controls/base-toggle.svelte
@@ -7,13 +7,18 @@
     click: MouseEvent | KeyboardEvent;
   }>();
 
+  type Option = {
+    label: string;
+    value: string;
+    selected: boolean;
+  };
+
   // eslint-disable-next-line @typescript-eslint/ban-types
-  export let icon: typeof SvelteComponent<{}>,
-    options: { label: string; value: string; selected: boolean }[];
+  export let icon: typeof SvelteComponent<{}>, options: [Option, Option];
 </script>
 
 <button
-  class="focus-outline group flex h-10 flex-1 flex-row items-center rounded-lg py-1.5 pl-4 pr-0 text-sm"
+  class="focus-outline group flex flex-1 flex-row items-center justify-center gap-x-3 rounded-lg bg-neutral-200/50 px-4 py-2.5 text-center text-sm text-neutral-800 transition-colors hover:bg-neutral-200 focus-visible:bg-neutral-200 dark:bg-neutral-700 dark:text-neutral-100 dark:hover:bg-neutral-800 dark:focus-visible:bg-neutral-800"
   tabindex="0"
   on:click={(e) => dispatch('click', e)}
   on:mouseup={(e) => {
@@ -25,29 +30,10 @@
   aria-label={$$props['aria-label']}
 >
   <svelte:component this={icon} />
-  <div
-    class="relative ml-2.5 mr-1.5 flex h-full w-full flex-1 flex-row items-center justify-around text-neutral-800 transition-colors dark:text-neutral-100"
+  <span class="block group-hover:hidden group-focus-visible:hidden"
+    >{options.find((option) => option.selected)?.label}</span
+  >
+  <span class="hidden group-hover:block group-focus-visible:block"
+    >{options.find((option) => !option.selected)?.label}</span
   >
-    <span class="peer/0 z-10 block flex-1" aria-selected={options[0].selected}>
-      <span class="mx-auto block w-full">
-        {options[0].label}
-      </span>
-    </span>
-    <span class="peer/1 z-10 block flex-1" aria-selected={options[1].selected}>
-      <span class="mx-auto block w-full">
-        {options[1].label}
-      </span>
-    </span>
-    <span
-      class="slider absolute bottom-0 left-0 top-0 z-0 block w-[45%] rounded-md bg-neutral-200/50 group-hover:bg-neutral-200 group-focus:bg-neutral-200 peer-aria-selected/0:translate-x-[6%] peer-aria-selected/1:translate-x-[116%] group-focus-within:peer-aria-selected/0:translate-x-[12%] group-focus-within:peer-aria-selected/1:translate-x-[110%] group-hover:peer-aria-selected/0:translate-x-[11%] group-hover:peer-aria-selected/1:translate-x-[110%] dark:bg-neutral-800 group-hover:dark:bg-neutral-700 group-focus:dark:bg-neutral-700"
-    ></span>
-  </div>
 </button>
-
-<style lang="scss">
-  .slider {
-    transition:
-      background-color 150ms ease,
-      transform 250ms cubic-bezier(0.47, 1.64, 0.41, 0.8);
-  }
-</style>
diff --git a/svelte-app/src/components/document/content/header.svelte b/svelte-app/src/components/document/content/header.svelte
index 71e81c29b..0178808ce 100644
--- a/svelte-app/src/components/document/content/header.svelte
+++ b/svelte-app/src/components/document/content/header.svelte
@@ -76,7 +76,7 @@
   class="flex w-full flex-row flex-wrap justify-between gap-2 p-2 text-sm text-neutral-700 dark:text-neutral-100"
 >
   <div class="flex flex-row gap-2">
-    <Tooltip text={$formatDate(data.date, 'days') ?? $t('Unknown date')}>
+    <Tooltip content={$formatDate(data.date, 'days') ?? $t('Unknown date')}>
       <p
         class="cursor-default rounded-lg bg-neutral-200/50 px-2.5 py-2 transition-colors dark:bg-neutral-700"
         aria-label="Published date"
@@ -85,7 +85,7 @@
       </p>
     </Tooltip>
     <Tooltip
-      text={$t('{length} words', {
+      content={$t('{length} words', {
         length: (data.estimatedWordCount ?? 0).toLocaleString($currentLang)
       })}
     >
diff --git a/svelte-app/src/components/experiments/gol.svelte b/svelte-app/src/components/experiments/gol.svelte
index 20108c0ac..4baf61642 100644
--- a/svelte-app/src/components/experiments/gol.svelte
+++ b/svelte-app/src/components/experiments/gol.svelte
@@ -136,7 +136,7 @@
     <Divider></Divider>
   </header>
 
-  <Tooltip text={running ? 'Pause' : 'Resume'}>
+  <Tooltip content={running ? 'Pause' : 'Resume'}>
     <button
       class="focus-outline absolute right-4 top-4 rounded-lg p-2 font-mono text-sm transition-colors hover:bg-violet-100/80 hover:text-orange-light/90 focus-visible:bg-violet-100/80 focus-visible:text-orange-light/90 dark:hover:bg-violet-700/80 dark:focus-visible:bg-violet-700/80"
       on:click={running ? stopGame : startGame}
diff --git a/svelte-app/src/components/experiments/mag-cursor.svelte b/svelte-app/src/components/experiments/mag-cursor.svelte
index 3084e89df..15619155a 100644
--- a/svelte-app/src/components/experiments/mag-cursor.svelte
+++ b/svelte-app/src/components/experiments/mag-cursor.svelte
@@ -35,8 +35,8 @@
       <div class="flex flex-row gap-x-6">
         <CursorTarget distance={40} let:active let:offset>
           <Tooltip
-            position="top"
-            text={useOffset ? "Disable 'pulling' targets" : "Enable 'pulling' targets"}
+            placement="top"
+            content={useOffset ? "Disable 'pulling' targets" : "Enable 'pulling' targets"}
           >
             <button
               class="-m-2 h-fit w-fit cursor-none p-2 font-mono text-sm hover:text-orange-light/90 focus-visible:text-orange-light/90 {active
diff --git a/svelte-app/src/components/images/image.svelte b/svelte-app/src/components/images/image.svelte
index f52fa9a35..49d147b9c 100644
--- a/svelte-app/src/components/images/image.svelte
+++ b/svelte-app/src/components/images/image.svelte
@@ -143,10 +143,10 @@
 
 <ImageModal bind:dialog bind:show={showImageModal}>
   <img
-    class="mx-auto h-full select-none rounded-md"
+    class="mx-auto box-border max-h-full max-w-full select-none rounded-md"
     src={fullSrc}
     alt={_key}
-    style="max-width: {imgDimensions.width}px; max-height: {imgDimensions.height}px; aspect-ratio: {imgDimensions.width} / {imgDimensions.height};"
+    style="object-fit: contain; aspect-ratio: {imgDimensions.width} / {imgDimensions.height};"
     in:receive={{ key: _key, duration: BASE_ANIMATION_DURATION }}
     out:send={{ key: _key, duration: BASE_ANIMATION_DURATION }}
   />
diff --git a/svelte-app/src/components/link.svelte b/svelte-app/src/components/link.svelte
index 1d652b255..09a7ab4c5 100644
--- a/svelte-app/src/components/link.svelte
+++ b/svelte-app/src/components/link.svelte
@@ -5,7 +5,9 @@
 
   import Tooltip from '$components/tooltips/tooltip.svelte';
 
-  export let tooltipPosition: 'top' | 'bottom' = 'bottom',
+  import type { Placement } from '@floating-ui/dom';
+
+  export let tooltipPlacement: Placement = 'bottom',
     tooltipText: string | undefined = undefined,
     newtab = false;
 
@@ -28,13 +30,12 @@
 </script>
 
 <Tooltip
-  text={tooltipText ?? isMailLink
+  content={tooltipText ?? isMailLink
     ? $t('Copy {value}', { value: `'${mailAddress}'` })
     : link && link.length > 50
       ? `${link.slice(0, 50 - 3)}...`
       : link ?? $t('Visit')}
-  position={tooltipPosition}
-  inDelay={500}
+  placement={tooltipPlacement}
 >
   <svelte:element
     this={type}
diff --git a/svelte-app/src/components/nav/confetti-piece.svelte b/svelte-app/src/components/nav/confetti-piece.svelte
deleted file mode 100644
index 59345a0b1..000000000
--- a/svelte-app/src/components/nav/confetti-piece.svelte
+++ /dev/null
@@ -1,39 +0,0 @@
-<script lang="ts">
-  export let index = 0;
-
-  const colours = [
-      'bg-rose-400',
-      'bg-yellow-400',
-      'bg-green-400',
-      'bg-cyan-400',
-      'bg-violet-400',
-      'bg-pink-400'
-    ],
-    spreadX = 100,
-    spreadY = 150;
-</script>
-
-<div
-  class="absolute h-1 w-1 opacity-0 {colours[index % 5]}"
-  style="--x-end: {Math.random() * 2 * spreadX - spreadX}px; --y-end: {Math.random() *
-    2 *
-    spreadY -
-    spreadY / 2}px;"
-></div>
-
-<style lang="scss">
-  div {
-    animation: explode 1s ease-out forwards;
-  }
-
-  @keyframes explode {
-    from {
-      opacity: 1;
-      transform: translate(0, 0) rotate(0);
-    }
-    to {
-      opacity: 0;
-      transform: translate(var(--x-end, 0px), var(--y-end, -400px)) rotate(360deg);
-    }
-  }
-</style>
diff --git a/svelte-app/src/components/nav/confetti.svelte b/svelte-app/src/components/nav/confetti.svelte
deleted file mode 100644
index 448ddd8db..000000000
--- a/svelte-app/src/components/nav/confetti.svelte
+++ /dev/null
@@ -1,18 +0,0 @@
-<script lang="ts">
-  import { createEventDispatcher, onMount } from 'svelte';
-
-  import ConfettiPiece from '$components/nav/confetti-piece.svelte';
-
-  const dispatch = createEventDispatcher<{ done: void }>();
-
-  onMount(() => setTimeout(() => dispatch('done'), 1500));
-</script>
-
-<div
-  class="pointer-events-none absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 overflow-visible"
-  aria-hidden="true"
->
-  {#each Array.from({ length: 30 }) as _, index (index)}
-    <ConfettiPiece {index}></ConfettiPiece>
-  {/each}
-</div>
diff --git a/svelte-app/src/components/nav/header-logo.svelte b/svelte-app/src/components/nav/header-logo.svelte
deleted file mode 100644
index a1db37d95..000000000
--- a/svelte-app/src/components/nav/header-logo.svelte
+++ /dev/null
@@ -1,35 +0,0 @@
-<script lang="ts">
-  import { linkTo, t } from '$lib/i18n';
-
-  import Confetti from '$components/nav/confetti.svelte';
-
-  let clicks = 0,
-    showConfetti = false,
-    clickTimeout: ReturnType<typeof setTimeout>;
-
-  const handleClick = () => {
-    clearTimeout(clickTimeout);
-    clicks++;
-
-    if (clicks >= 3) {
-      showConfetti = true;
-    }
-
-    clickTimeout = setTimeout(() => (clicks = 0), 500);
-  };
-</script>
-
-<span class="relative h-fit w-fit">
-  <a
-    class="focus-outline-sm block w-11 select-none rounded-xs invert-0 transition-[filter] dark:invert"
-    href={$linkTo(clicks < 3 ? '/' : '/experiments')}
-    aria-label={$t('Home')}
-    on:click={handleClick}
-  >
-    <img class="aspect-square" src="/assets/logo-standard.webp" alt="logo" />
-  </a>
-
-  {#if showConfetti}
-    <Confetti on:done={() => (showConfetti = false)}></Confetti>
-  {/if}
-</span>
diff --git a/svelte-app/src/components/portable-text/footnote.svelte b/svelte-app/src/components/portable-text/footnote.svelte
index 87fc6c3f4..717118f47 100644
--- a/svelte-app/src/components/portable-text/footnote.svelte
+++ b/svelte-app/src/components/portable-text/footnote.svelte
@@ -38,7 +38,7 @@
 
 <span>
   <slot />&nbsp;
-  <Tooltip text={$t('Go to footnote')}>
+  <Tooltip content={$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 195da14a0..b373a8d4f 100644
--- a/svelte-app/src/components/portable-text/portable-text.svelte
+++ b/svelte-app/src/components/portable-text/portable-text.svelte
@@ -147,7 +147,7 @@
               <li class="list-item">
                 <span class="inline-flex flex-row items-start break-all">
                   <svelte:self text={note.note} plaintext />
-                  <Tooltip text={$t('Go to footnote source')} position="top">
+                  <Tooltip content={$t('Go to footnote source')} position="top">
                     <a
                       class="focus-outline-sm group ml-2 rounded-xs px-2 py-1 text-sm transition-colors hover:bg-neutral-light dark:hover:bg-neutral-dark"
                       href={`#src-${note._key}`}
diff --git a/svelte-app/src/components/sidebar.svelte b/svelte-app/src/components/sidebar.svelte
index 5aecae2cb..0eb0b548c 100644
--- a/svelte-app/src/components/sidebar.svelte
+++ b/svelte-app/src/components/sidebar.svelte
@@ -12,8 +12,8 @@
   import GlobeAsiaAustraliaSmall from '$components/icons/globe-asia-australia-small.svelte';
   import BaseContainer from '$components/layouts/base-container.svelte';
   import Link from '$components/link.svelte';
-  import HeaderLink from '$components/nav/header-link.svelte';
   import SidebarBlock from '$components/sidebar/sidebar-block.svelte';
+  import SidebarLink from '$components/sidebar/sidebar-link.svelte';
   import ToruWidget from '$components/sidebar/toru.svelte';
 
   import type { ToruData } from '$components/sidebar/toru';
@@ -34,8 +34,8 @@
 
   $: pfp =
     $theme === APP_THEMES.DARK
-      ? '/assets/avi/standard.png'
-      : '/assets/avi/line_sunglases.png';
+      ? '/assets/avi/standard_transparent.png'
+      : '/assets/avi/line_sunglasses_transparent.png';
 </script>
 
 <div
@@ -46,7 +46,7 @@
   >
     <div class="flex w-full flex-shrink-0 flex-row items-center justify-start gap-x-4">
       <img
-        class="p-0d aspect-square h-14 w-14 flex-shrink-0 select-none rounded-lg bg-orange-light/60"
+        class="aspect-square h-14 w-14 flex-shrink-0 select-none rounded-lg bg-neutral-300/50 p-0 dark:bg-neutral-100/50"
         src={pfp}
         alt="kio.dev"
       />
@@ -86,7 +86,7 @@
                 class="mt-px group-hover:hidden group-focus-visible:hidden"
               />
               <EnvelopeOpenSmall
-                class="mt-px hidden group-hover:block group-focus-visible:block"
+                class="hidden group-hover:block group-focus-visible:block"
               />
             {:else}
               <GlobeAmericasSmall
@@ -116,7 +116,7 @@
       >
         {#each NAV_LINKS as link}
           <li class="h-fit w-full">
-            <HeaderLink {link} />
+            <SidebarLink {link} />
           </li>
         {/each}
       </ul>
@@ -124,7 +124,7 @@
   </BaseContainer>
 
   <BaseContainer
-    class="group/container order-1 flex flex-row gap-2 p-2 group-first/container:border-r-2 lg:order-2 print:hidden"
+    class="group/container order-1 flex flex-row gap-2 p-2 px-3 group-first/container:border-r-2 lg:order-2 print:hidden"
   >
     <LangToggle />
     <ThemeToggle />
@@ -138,12 +138,12 @@
 
   {#if APP_VERSION?.length}
     <div
-      class="order-5 mt-auto flex w-full flex-row items-center justify-center gap-x-2 p-2 text-sm"
+      class="order-5 mt-auto hidden w-full flex-row items-center justify-center gap-x-2 p-2 text-sm lg:flex"
     >
       <span class="text-neutral-600/30 dark:text-neutral-200/40"
         ><a
           href={`${BASE_GIT_URL}/commit/${APP_VERSION}`}
-          class="font-medium hover:underline"
+          class="focus-outline-sm rounded-xs font-medium hover:underline"
           target="_blank"
           rel="noopener noreferrer">#{APP_VERSION.slice(0, 6)}</a
         ></span
diff --git a/svelte-app/src/components/sidebar/sidebar-headings.svelte b/svelte-app/src/components/sidebar/sidebar-headings.svelte
index e343f59a6..844ac9082 100644
--- a/svelte-app/src/components/sidebar/sidebar-headings.svelte
+++ b/svelte-app/src/components/sidebar/sidebar-headings.svelte
@@ -12,8 +12,14 @@
   <div class="w-full pt-1 text-base">
     <a
       href={`#${heading.key}`}
-      class="focus-outline-sm group flex w-full flex-row items-center gap-x-2 rounded-xs text-neutral-700 decoration-orange-light transition-colors hover:text-orange-light dark:text-neutral-100 dark:hover:text-orange-light"
+      class="focus-outline-sm group flex w-full flex-row items-center gap-x-2 rounded-xs text-neutral-700 decoration-orange-light underline-offset-[3px] transition-colors hover:text-orange-light dark:text-neutral-100 dark:hover:text-orange-light"
       class:underline={heading.key === hash.slice(1)}
+      on:click={(e) => {
+        if (hash.slice(1) === heading.key) {
+          // remove hash then re-add to trigger scroll
+          location.hash = '';
+        }
+      }}
     >
       <span
         class="inline-block h-1 w-1 rounded-full bg-neutral-600 transition-colors group-hover:bg-orange-light dark:bg-neutral-200"
diff --git a/svelte-app/src/components/nav/header-link.svelte b/svelte-app/src/components/sidebar/sidebar-link.svelte
similarity index 69%
rename from svelte-app/src/components/nav/header-link.svelte
rename to svelte-app/src/components/sidebar/sidebar-link.svelte
index 62350c91f..783d6e7a2 100644
--- a/svelte-app/src/components/nav/header-link.svelte
+++ b/svelte-app/src/components/sidebar/sidebar-link.svelte
@@ -3,6 +3,9 @@
   import { navigating, page } from '$app/stores';
   import { isLocalized, linkTo, t } from '$lib/i18n';
 
+  import SidebarTooltip from '$components/sidebar/sidebar-tooltip.svelte';
+  import Tooltip from '$components/tooltips/tooltip.svelte';
+
   import type { NAV_LINKS } from '$lib/consts';
 
   export let link: (typeof NAV_LINKS)[number],
@@ -34,18 +37,23 @@
   })();
 </script>
 
-<a
-  href={link.url}
-  class="focus-outline-sm -mx-2 block w-[calc(100%+16px)] rounded-lg px-3 py-1.5 text-md text-neutral-700 transition-colors dark:text-neutral-200"
-  class:active={isActive}
-  class:font-semibold={isActive}
-  aria-current={isActive ? 'page' : undefined}
-  data-sveltekit-preload-code
-  on:click={handleAction}
-  on:keydown={(e) => e.key === 'Enter' && handleAction(e)}
->
-  {$t(link.name)}
-</a>
+<Tooltip placement="bottom-end">
+  <svelte:fragment slot="content">
+    <SidebarTooltip {link} />
+  </svelte:fragment>
+  <a
+    href={link.url}
+    class="focus-outline-sm -mx-2 block w-[calc(100%+16px)] rounded-lg px-3 py-1.5 text-md text-neutral-700 transition-colors dark:text-neutral-200"
+    class:active={isActive}
+    class:font-semibold={isActive}
+    aria-current={isActive ? 'page' : undefined}
+    data-sveltekit-preload-code
+    on:click={handleAction}
+    on:keydown={(e) => e.key === 'Enter' && handleAction(e)}
+  >
+    {$t(link.name)}
+  </a>
+</Tooltip>
 
 <style lang="scss">
   @import '@styles/colors';
diff --git a/svelte-app/src/components/sidebar/sidebar-tooltip.svelte b/svelte-app/src/components/sidebar/sidebar-tooltip.svelte
new file mode 100644
index 000000000..76c221a82
--- /dev/null
+++ b/svelte-app/src/components/sidebar/sidebar-tooltip.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+  import { t } from '$lib/i18n';
+
+  import type { NAV_LINKS } from '$lib/consts';
+
+  export let link: (typeof NAV_LINKS)[number];
+
+  const { title, description } = (() => {
+    const title = $t(link.name);
+    switch (link.url) {
+      case '/':
+        return {
+          title,
+          description: $t('pages.about.description')
+        };
+      case '/thoughts':
+        return {
+          title,
+          description: $t('pages.thoughts.description')
+        };
+      case '/work':
+        return {
+          title,
+          description: $t('pages.work.description')
+        };
+      case '/etc':
+        return {
+          title,
+          description: $t('pages.etc.description')
+        };
+    }
+  })();
+</script>
+
+<div
+  class="pointer-events-none flex max-w-64 flex-col gap-1 rounded-lg bg-neutral-600 px-3 pb-3 pt-2 text-light dark:bg-neutral-100 dark:text-dark"
+>
+  <span>
+    <p class="font-sans text-base font-semibold">{title}</p>
+  </span>
+  <p class="text-wrap font-sans text-sm">{description}</p>
+</div>
diff --git a/svelte-app/src/components/sidebar/tooltips.ts b/svelte-app/src/components/sidebar/tooltips.ts
new file mode 100644
index 000000000..b1d64b03a
--- /dev/null
+++ b/svelte-app/src/components/sidebar/tooltips.ts
@@ -0,0 +1,3 @@
+import { writable } from 'svelte/store';
+
+export const tooltipContent = writable({});
diff --git a/svelte-app/src/components/tooltips/inner.svelte b/svelte-app/src/components/tooltips/inner.svelte
index 2b9189b54..ce31f3261 100644
--- a/svelte-app/src/components/tooltips/inner.svelte
+++ b/svelte-app/src/components/tooltips/inner.svelte
@@ -1,144 +1,121 @@
 <script lang="ts">
-  import { onDestroy, onMount, tick } from 'svelte';
-  import { cubicInOut } from 'svelte/easing';
-  import { fade } from 'svelte/transition';
+  import { onDestroy, onMount } from 'svelte';
 
   import { browser } from '$app/environment';
 
-  import type { Tooltip } from '$lib/tooltips';
-  import type { FadeParams, TransitionConfig } from 'svelte/transition';
-
-  const PADDING_PX = 8,
-    MAX_LENGTH = 72;
-
-  export let id: Tooltip['id'],
-    delay: Tooltip['delay'],
-    content: Tooltip['content'],
-    duration: Tooltip['duration'],
-    placement: Tooltip['placement'],
-    followCursor: Tooltip['followCursor'],
-    offset: Tooltip['offset'],
-    target: Tooltip['target'];
-
-  let maybeTransition =
-    duration > 0 ? fade : (node: Element, args: FadeParams): TransitionConfig => ({});
-
-  onMount(() => {
-    if (followCursor && target) {
-      target.addEventListener('mousemove', calculatePosition);
-    }
-
-    calculatePosition();
-  });
-
-  onDestroy(() => {
-    if (followCursor && target) {
-      target.removeEventListener('mousemove', calculatePosition);
-    }
-  });
+  import {
+    arrow,
+    autoUpdate,
+    computePosition,
+    flip,
+    offset as offsetFn,
+    shift
+  } from '@floating-ui/dom';
+
+  import type { ComputePositionConfig, Placement } from '@floating-ui/dom';
+  import type { TransitionConfig } from 'svelte/transition';
+
+  export let id: number,
+    className: string | undefined = undefined,
+    duration: number,
+    placement: Placement,
+    offset: number,
+    followCursor: boolean,
+    showArrow: boolean,
+    transition: ((node: Element, args?: unknown) => TransitionConfig) | undefined =
+      undefined,
+    target: HTMLElement;
 
   let tooltipElement: HTMLDivElement,
-    position = { x: 0, y: 0 };
+    arrowElement: HTMLSpanElement,
+    position = { x: 0, y: 0 },
+    cleanup: () => void,
+    maybeTransition =
+      transition && duration > 0
+        ? transition
+        : (_node: Element, _args?: unknown): TransitionConfig => ({});
 
   const calculatePosition = async (e?: MouseEvent) => {
     if (!browser || !target || !tooltipElement) {
       return;
     }
 
-    await tick();
-
-    const tooltipRect = tooltipElement.getBoundingClientRect();
-    const targetRect = target.getBoundingClientRect();
-    const pageScroll = {
-      x: window.scrollX,
-      y: window.scrollY
-    };
-    const { innerWidth, innerHeight } = window;
+    let targetToUse = target;
 
     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;
+      targetToUse = {
+        getBoundingClientRect: () => ({
+          left: e.clientX,
+          top: e.clientY,
+          right: e.clientX,
+          bottom: e.clientY,
+          width: offset * 1.5,
+          height: offset * 1.5
+        })
+      } as HTMLElement;
     }
 
-    let x = pageScroll.x,
-      y = pageScroll.y;
-
-    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;
+    const middleware: ComputePositionConfig['middleware'] = [
+      offsetFn(offset),
+      flip(),
+      shift({ padding: 10 })
+    ];
+
+    if (showArrow) {
+      middleware.push(arrow({ element: arrowElement }));
     }
 
-    // if x-pos will result in tooltip being off-screen, adjust it
-    if (x + tooltipRect.width > innerWidth + pageScroll.x - PADDING_PX) {
-      x = innerWidth + pageScroll.x - tooltipRect.width - PADDING_PX;
-    } else if (x < PADDING_PX) {
-      x = PADDING_PX;
+    const {
+      x,
+      y,
+      placement: actualPlacement,
+      middlewareData
+    } = await computePosition(targetToUse, tooltipElement, {
+      placement,
+      middleware
+    });
+
+    position.x = x;
+    position.y = y;
+
+    if (showArrow) {
+      const staticSide = (
+        {
+          top: 'bottom',
+          right: 'left',
+          bottom: 'top',
+          left: 'right'
+        } as const
+      )[actualPlacement.split('-')[0]]!;
+
+      Object.assign(arrowElement.style, {
+        left: middlewareData.arrow?.x ? `${middlewareData.arrow.x}px` : '',
+        top: middlewareData.arrow?.y ? `${middlewareData.arrow.y}px` : '',
+        right: '',
+        bottom: '',
+        [staticSide]: '-4px'
+      });
     }
+  };
 
-    // same for height
-    if (y + tooltipRect.height > innerHeight + pageScroll.y - PADDING_PX) {
-      y = innerHeight + pageScroll.y - tooltipRect.height - PADDING_PX;
-    } else if (y < PADDING_PX) {
-      y = PADDING_PX;
+  onMount(() => {
+    if (!target || !tooltipElement) {
+      return;
     }
 
-    position = {
-      x: Math.max(0, Math.min(innerWidth + pageScroll.x, x + offset[0])),
-      y: Math.max(0, Math.min(innerHeight + pageScroll.y, y + offset[1]))
-    };
-  };
+    cleanup = autoUpdate(target, tooltipElement, calculatePosition, {
+      animationFrame: false
+    });
 
-  $: calculatePosition(), [target, tooltipElement, placement, followCursor];
+    if (followCursor) {
+      target.addEventListener('mousemove', calculatePosition);
+    }
+  });
+
+  onDestroy(() => {
+    cleanup?.();
+    target?.removeEventListener('mousemove', calculatePosition);
+  });
 </script>
 
 <div
@@ -147,14 +124,16 @@
   id={`tooltip-${id}`}
   bind:this={tooltipElement}
   aria-hidden="true"
+  in:maybeTransition={{ duration }}
+  out:maybeTransition={{ duration }}
 >
-  <span
-    class="block whitespace-nowrap rounded-sm bg-neutral-600 px-2 py-1.5 font-mono text-xs text-light dark:bg-neutral-100 dark:text-dark"
-    in:maybeTransition={{ duration, easing: cubicInOut }}
-    out:maybeTransition={{ duration, easing: cubicInOut, delay }}
-  >
-    {content.trim().length >= MAX_LENGTH
-      ? `${content.trim().slice(0, MAX_LENGTH - 3)}...`
-      : content.trim()}
+  <span class="block px-2 py-1.5 {className || ''}">
+    <slot />
   </span>
+  {#if showArrow}
+    <span
+      class="absolute block h-2 w-2 rotate-45 bg-neutral-600 dark:bg-neutral-100"
+      bind:this={arrowElement}
+    ></span>
+  {/if}
 </div>
diff --git a/svelte-app/src/components/tooltips/manager.svelte b/svelte-app/src/components/tooltips/manager.svelte
deleted file mode 100644
index 390f45760..000000000
--- a/svelte-app/src/components/tooltips/manager.svelte
+++ /dev/null
@@ -1,11 +0,0 @@
-<script lang="ts">
-  import { tooltips } from '$lib/tooltips';
-
-  import TooltipInner from '$components/tooltips/inner.svelte';
-
-  export let container: HTMLDivElement | undefined = undefined;
-</script>
-
-{#each $tooltips as tooltip (tooltip.id)}
-  <TooltipInner {...tooltip} {container}></TooltipInner>
-{/each}
diff --git a/svelte-app/src/components/tooltips/tooltip.svelte b/svelte-app/src/components/tooltips/tooltip.svelte
index 2dbf1b0fd..c9b3ff783 100644
--- a/svelte-app/src/components/tooltips/tooltip.svelte
+++ b/svelte-app/src/components/tooltips/tooltip.svelte
@@ -1,51 +1,47 @@
 <script lang="ts">
   import { onDestroy, onMount } from 'svelte';
+  import { cubicInOut } from 'svelte/easing';
   import { get } from 'svelte/store';
+  import { fade, fly } from 'svelte/transition';
 
-  import { browser } from '$app/environment';
+  import { BASE_ANIMATION_DURATION } from '$lib/consts';
   import Logger from '$lib/logger';
   import { isMobile } from '$lib/responsive';
-  import { createTooltip, destroyTooltip, updateTooltip } from '$lib/tooltips';
 
-  import type { Tooltip } from '$lib/tooltips';
+  import Inner from '$components/tooltips/inner.svelte';
 
-  export let text: Tooltip['content'],
-    duration: Tooltip['duration'] = 150,
-    inDelay = 50,
-    outDelay = 100,
-    position: Tooltip['placement'] = 'bottom',
-    fixed: Tooltip['followCursor'] = true,
-    offset: Tooltip['offset'] = [0, 12];
+  import type { Placement } from '@floating-ui/dom';
 
-  let tooltipId = Math.floor(Math.random() * 100000),
-    timeoutId: ReturnType<typeof setTimeout>,
+  export let content: string | undefined = undefined,
+    duration: number = BASE_ANIMATION_DURATION,
+    placement: Placement = 'bottom',
+    delay: [number, number] = [0, 0],
+    offset: number = 10,
+    showArrow = false,
+    followCursor = false;
+
+  const tooltipId = Math.floor(Math.random() * 100000);
+
+  let timeoutInId: ReturnType<typeof setTimeout>,
+    timeoutOutId: ReturnType<typeof setTimeout>,
     container: HTMLSpanElement,
-    target: HTMLElement | null;
+    target: HTMLElement | null,
+    active = false;
 
   export const id = `tooltip-${tooltipId}`;
 
   const showTooltip = () => {
-    if (!target || !text?.trim() || get(isMobile)) {
+    if (!target || (!content && !$$slots?.content) || get(isMobile)) {
       return;
     }
 
-    clearTimeout(timeoutId);
-
-    const opts = {
-      id: tooltipId,
-      content: text,
-      duration,
-      placement: position,
-      followCursor: !fixed,
-      offset,
-      target: target as HTMLElement,
-      delay: outDelay
-    };
-
-    if (inDelay > 0) {
-      timeoutId = setTimeout(() => createTooltip(opts), inDelay);
+    clearTimeout(timeoutInId);
+    clearTimeout(timeoutOutId);
+
+    if (delay[0] > 0) {
+      timeoutInId = setTimeout(() => (active = true), delay[0]);
     } else {
-      createTooltip(opts);
+      active = true;
     }
   };
 
@@ -54,8 +50,13 @@
       return;
     }
 
-    destroyTooltip(tooltipId);
-    clearTimeout(timeoutId);
+    clearTimeout(timeoutInId);
+
+    if (delay[1] > 0) {
+      timeoutOutId = setTimeout(() => (active = false), delay[1]);
+    } else {
+      active = false;
+    }
   };
 
   const getActionableTarget = (el: HTMLElement | null): HTMLElement | null => {
@@ -66,6 +67,14 @@
     return el;
   };
 
+  const events = [
+    ['mouseenter', showTooltip],
+    ['mouseleave', hideTooltip],
+    ['focusin', showTooltip],
+    ['focusout', hideTooltip],
+    ['blur', hideTooltip]
+  ] as const;
+
   onMount(() => {
     target = getActionableTarget(container?.firstChild as HTMLElement | null);
 
@@ -74,11 +83,7 @@
       return;
     }
 
-    target.addEventListener('mouseenter', showTooltip);
-    target.addEventListener('mouseleave', hideTooltip);
-    target.addEventListener('focusin', showTooltip);
-    target.addEventListener('focusout', hideTooltip);
-    target.addEventListener('blur', hideTooltip);
+    events.forEach(([event, handler]) => target!.addEventListener(event, handler));
   });
 
   onDestroy(() => {
@@ -88,16 +93,33 @@
       return;
     }
 
-    target.removeEventListener('mouseenter', showTooltip);
-    target.removeEventListener('mouseleave', hideTooltip);
-    target.removeEventListener('focusin', showTooltip);
-    target.removeEventListener('focusout', hideTooltip);
-    target.removeEventListener('blur', hideTooltip);
+    events.forEach(([event, handler]) => target!.removeEventListener(event, handler));
   });
-
-  $: tooltipId && text?.trim() && browser && updateTooltip(tooltipId, { content: text });
 </script>
 
 <span bind:this={container} class="contents" data-test-id="tooltip-container">
   <slot {id} />
 </span>
+
+{#if active && target}
+  <Inner
+    id={tooltipId}
+    transition={content
+      ? (node, args) => fade(node, { ...(args ?? {}), easing: cubicInOut })
+      : (node, args) => fly(node, { ...(args ?? {}), easing: cubicInOut, x: 4 })}
+    {duration}
+    {placement}
+    {offset}
+    {target}
+    {showArrow}
+    {followCursor}
+    className={content &&
+      'bg-neutral-600 font-mono text-xs text-light dark:bg-neutral-100 dark:text-dark whitespace-nowrap rounded-md'}
+  >
+    {#if content}
+      {content}
+    {:else}
+      <slot name="content" {id} />
+    {/if}
+  </Inner>
+{/if}
diff --git a/svelte-app/src/lib/tooltips.ts b/svelte-app/src/lib/tooltips.ts
deleted file mode 100644
index 3b05eecad..000000000
--- a/svelte-app/src/lib/tooltips.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-import { writable } from 'svelte/store';
-
-type BasicPlacement = 'top' | 'bottom' | 'left' | 'right';
-
-type Placement = BasicPlacement | `${BasicPlacement}-start` | `${BasicPlacement}-end`;
-
-export type Tooltip = {
-  id: number;
-  content: string;
-  duration: number;
-  placement: Placement;
-  followCursor: boolean;
-  target: HTMLElement;
-  offset: [number, number];
-  delay: number;
-};
-
-const tooltips = writable<Tooltip[]>([]);
-
-const createTooltip = (data: Tooltip) => {
-  tooltips.update((t) => {
-    const existing = t.findIndex(
-      (tooltip) => tooltip.id === data.id || tooltip.target === data.target
-    );
-    if (existing !== -1) {
-      t.splice(existing, 1);
-    }
-    t.push(data);
-    return t;
-  });
-  return data.id;
-};
-
-const updateTooltip = (
-  id: number,
-  data: Partial<Exclude<Tooltip, 'id' | 'target' | 'duration'>>
-) => {
-  tooltips.update((t) => {
-    const existing = t.findIndex((tooltip) => tooltip.id === id);
-    if (existing !== -1) {
-      t[existing] = { ...t[existing], ...data };
-    }
-    return t;
-  });
-};
-
-const destroyTooltip = (id: number) => {
-  tooltips.update((t) => {
-    const filtered = [];
-
-    for (let i = 0; i < t.length; ++i) {
-      if (t[i].id !== id) {
-        filtered.push(t[i]);
-      }
-    }
-
-    return filtered;
-  });
-};
-
-export { createTooltip, destroyTooltip, tooltips, updateTooltip };
diff --git a/svelte-app/src/routes/+layout.svelte b/svelte-app/src/routes/+layout.svelte
index b432afae6..f7a7fff40 100644
--- a/svelte-app/src/routes/+layout.svelte
+++ b/svelte-app/src/routes/+layout.svelte
@@ -23,7 +23,6 @@
 
   import PageTransition from '$components/layouts/page-transition.svelte';
   import Sidebar from '$components/sidebar.svelte';
-  import TooltipManager from '$components/tooltips/manager.svelte';
 
   import type { Unsubscriber } from 'svelte/store';
 
@@ -154,7 +153,7 @@
     <Sidebar config={data.config} toruData={data.toruData} {scrollContainer} />
 
     <div
-      class="max-w-6xl flex-1 rounded-xl lg:mr-auto lg:overflow-x-hidden lg:overflow-y-scroll"
+      class="focus-outline max-w-6xl flex-1 rounded-xl lg:mr-auto lg:overflow-x-hidden lg:overflow-y-scroll"
       id="content-wrapper"
       bind:this={scrollContainer}
     >
@@ -163,6 +162,4 @@
       </PageTransition>
     </div>
   </div>
-
-  <TooltipManager />
 </div>