Make category tooltips track cursor

hdyc-svelte/src/app.css

@@ -675,6 +675,7 @@ a:focus-visible {
 .calc-list-item {
   display: block;
   position: relative;
+  --calc-tooltip-left: 50%;
   padding: 1rem 1.25rem;
   background: var(--card-bg);
   border: 1px solid var(--border);
@@ -699,7 +700,7 @@ a:focus-visible {
 .calc-list-tooltip {
   position: absolute;
   bottom: calc(100% + 0.4rem);
-  left: 50%;
+  left: var(--calc-tooltip-left, 50%);
   background: var(--section-bg);
   color: var(--text);
   border: 1px solid var(--border);

hdyc-svelte/src/routes/category/[category]/+page.svelte

@@ -3,6 +3,20 @@
   import { buildSeoMeta, canonicalUrl, SITE_NAME, SITE_URL, toJsonLd } from '$lib/seo';
   import { getConversionRateText } from '$lib/utils/conversionRate';
 
+  const handleCalcTooltipMousemove = (event: MouseEvent) => {
+    const card = event.currentTarget as HTMLElement | null;
+    if (!card) return;
+    const rect = card.getBoundingClientRect();
+    const x = Math.min(Math.max(event.clientX - rect.left, 0), rect.width);
+    card.style.setProperty('--calc-tooltip-left', `${x}px`);
+  };
+
+  const resetCalcTooltipPosition = (event: MouseEvent) => {
+    const card = event.currentTarget as HTMLElement | null;
+    if (!card) return;
+    card.style.removeProperty('--calc-tooltip-left');
+  };
+
   export let data: PageData;
 
   $: pageTitle = `${data.label} Converters — ${SITE_NAME}`;
@@ -87,7 +101,13 @@
 <div class="calc-list">
   {#each data.calculators as calc}
     {@const conversionRateText = getConversionRateText(calc)}
-    <a href="/{calc.slug}" class="calc-list-item">
+    <a
+      href="/{calc.slug}"
+      class="calc-list-item"
+      on:mousemove={handleCalcTooltipMousemove}
+      on:mouseleave={resetCalcTooltipPosition}
+      on:focus={resetCalcTooltipPosition}
+    >
       {calc.name}
       {#if conversionRateText}
         <span class="calc-list-tooltip" role="tooltip">{conversionRateText}</span>