diff --git a/hdyc-svelte/src/app.css b/hdyc-svelte/src/app.css
index a295dd3..ab5c568 100644
--- a/hdyc-svelte/src/app.css
+++ b/hdyc-svelte/src/app.css
@@ -676,6 +676,7 @@ a:focus-visible {
   display: block;
   position: relative;
   --calc-tooltip-left: 50%;
+  --calc-tooltip-translate: 0.2rem;
   padding: 1rem 1.25rem;
   background: var(--card-bg);
   border: 1px solid var(--border);
@@ -699,7 +700,8 @@ a:focus-visible {
 }
 .calc-list-tooltip {
   position: absolute;
-  bottom: calc(100% + 0.4rem);
+  bottom: var(--calc-tooltip-bottom, calc(100% + 0.4rem));
+  top: var(--calc-tooltip-top, auto);
   left: var(--calc-tooltip-left, 50%);
   background: var(--section-bg);
   color: var(--text);
@@ -712,7 +714,7 @@ a:focus-visible {
   pointer-events: none;
   opacity: 0;
   visibility: hidden;
-  transform: translate(-50%, 0.2rem);
+  transform: translate(-50%, var(--calc-tooltip-translate, 0.2rem));
   transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
   white-space: nowrap;
   z-index: 2;
diff --git a/hdyc-svelte/src/routes/category/[category]/+page.svelte b/hdyc-svelte/src/routes/category/[category]/+page.svelte
index f62ae9a..5bac4f1 100644
--- a/hdyc-svelte/src/routes/category/[category]/+page.svelte
+++ b/hdyc-svelte/src/routes/category/[category]/+page.svelte
@@ -8,13 +8,20 @@
     if (!card) return;
     const rect = card.getBoundingClientRect();
     const x = Math.min(Math.max(event.clientX - rect.left, 0), rect.width);
+    const y = Math.min(Math.max(event.clientY - rect.top, 0), rect.height);
     card.style.setProperty('--calc-tooltip-left', `${x}px`);
+    card.style.setProperty('--calc-tooltip-top', `${y}px`);
+    card.style.setProperty('--calc-tooltip-bottom', 'auto');
+    card.style.setProperty('--calc-tooltip-translate', '-100%');
   };
 
   const resetCalcTooltipPosition = (event: MouseEvent) => {
     const card = event.currentTarget as HTMLElement | null;
     if (!card) return;
     card.style.removeProperty('--calc-tooltip-left');
+    card.style.removeProperty('--calc-tooltip-top');
+    card.style.removeProperty('--calc-tooltip-bottom');
+    card.style.removeProperty('--calc-tooltip-translate');
   };
 
   export let data: PageData;