feat(Tooltip): Support contained="window" to keep tooltip within wi…

…ndow/viewport (along with `container` and `false`)
techniq · Jan 14, 2025 · e00528a · e00528a
1 parent 7f39f93
commit e00528a
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 13 deletions.
diff --git a/.changeset/metal-mangos-leave.md b/.changeset/metal-mangos-leave.md
@@ -0,0 +1,5 @@
+---
+'layerchart': minor
+---
+
+feat(Tooltip): Support `contained="window"` to keep tooltip within window/viewport (along with `container` and `false`)
diff --git a/packages/layerchart/src/lib/components/tooltip/Tooltip.svelte b/packages/layerchart/src/lib/components/tooltip/Tooltip.svelte
@@ -31,7 +31,7 @@
     | 'bottom-right';
   export let anchor: Placement = 'top-left';
 
-  export let contained: 'container' | false = 'container'; // TODO: Support 'window' using getBoundingClientRect()
+  export let contained: 'container' | 'window' | false = 'container';
   export let variant: 'default' | 'invert' | 'none' = 'default';
 
   /** Set to `false` to disable spring transitions */
@@ -134,8 +134,8 @@
     rect.bottom = rect.top + tooltipHeight;
     rect.right = rect.left + tooltipWidth;
 
-    // Check if outside of container and swap align side accordingly
     if (contained === 'container') {
+      // Check if outside of container and swap align side accordingly
       if ((xAlign === 'start' || xAlign === 'center') && rect.right > $containerWidth) {
         rect.left = alignValue(xValue, 'end', xOffset, tooltipWidth);
       }
@@ -151,11 +151,40 @@
         rect.top = alignValue(yValue, 'start', yOffset, tooltipHeight);
       }
       rect.bottom = rect.top + tooltipHeight;
+    } else if (contained === 'window') {
+      // Check if outside of window / viewport and swap align side accordingly
+      // Root <div> won't be available on initial mount
+      if (rootEl?.parentElement) {
+        const parentViewportRect = rootEl.parentElement.getBoundingClientRect();
+        if (
+          (xAlign === 'start' || xAlign === 'center') &&
+          parentViewportRect.left + rect.right > window.innerWidth
+        ) {
+          rect.left = alignValue(xValue, 'end', xOffset, tooltipWidth);
+        }
+        if ((xAlign === 'end' || xAlign === 'center') && parentViewportRect.left + rect.left < 0) {
+          rect.left = alignValue(xValue, 'start', xOffset, tooltipWidth);
+        }
+        rect.right = rect.left + tooltipWidth;
+
+        if (
+          (yAlign === 'start' || yAlign === 'center') &&
+          parentViewportRect.top + rect.bottom > window.innerHeight
+        ) {
+          rect.top = alignValue(yValue, 'end', yOffset, tooltipHeight);
+        }
+        if ((yAlign === 'end' || yAlign === 'center') && parentViewportRect.top + rect.top < 0) {
+          rect.top = alignValue(yValue, 'start', yOffset, tooltipHeight);
+        }
+        rect.bottom = rect.top + tooltipHeight;
+      }
     }
 
     $yPos = rect.top;
     $xPos = rect.left;
   }
+
+  let rootEl: HTMLDivElement;
 </script>
 
 {#if $tooltip.data}
@@ -166,6 +195,7 @@
     transition:fade={{ duration: 100 }}
     bind:clientWidth={tooltipWidth}
     bind:clientHeight={tooltipHeight}
+    bind:this={rootEl}
   >
     <div
       class={cls(

diff --git a/packages/layerchart/src/routes/docs/components/Tooltip/+page.svelte b/packages/layerchart/src/routes/docs/components/Tooltip/+page.svelte
@@ -124,6 +124,7 @@
   ] as const;
   let anchor: ComponentProps<Tooltip.Root>['anchor'] = 'top-left';
   let snap: 'pointer' | 'data' = 'pointer';
+  let contained: ComponentProps<Tooltip.Root>['contained'] = false;
 
   let tooltipContext: ComponentProps<Chart<any>>['tooltipContext'];
 </script>
@@ -472,23 +473,14 @@
 
 <h2>Anchor location</h2>
 
-<div class="grid grid-cols-2 gap-2 mb-2">
+<div class="grid grid-cols-3 gap-2 mb-2">
   <Toggle let:on={open} let:toggle>
     <Field label="Anchor" class="cursor-pointer" on:click={toggle}>
       <span class="text-sm">
         {anchor}
       </span>
     </Field>
 
-    <MenuField
-      label="Snap"
-      bind:value={snap}
-      options={[
-        { label: 'pointer', value: 'pointer' },
-        { label: 'data', value: 'data' },
-      ]}
-    />
-
     <Menu {open} on:close={toggle} placement="bottom-start">
       <div class="grid grid-cols-3 gap-1 p-1">
         {#each anchorOptions as option}
@@ -503,6 +495,25 @@
       </div>
     </Menu>
   </Toggle>
+
+  <MenuField
+    label="Snap"
+    bind:value={snap}
+    options={[
+      { label: 'pointer', value: 'pointer' },
+      { label: 'data', value: 'data' },
+    ]}
+  />
+
+  <MenuField
+    label="Contained"
+    bind:value={contained}
+    options={[
+      { label: 'none', value: false },
+      { label: 'container', value: 'container' },
+      { label: 'window', value: 'window' },
+    ]}
+  />
 </div>
 
 <Preview data={dateSeries}>
@@ -533,6 +544,7 @@
         xOffset={['top', 'center', 'bottom'].includes(anchor ?? '') ? 0 : 10}
         y={snap}
         yOffset={['left', 'center', 'right'].includes(anchor ?? '') ? 0 : 10}
+        {contained}
         let:data
       >
         <Tooltip.Header>{format(data.date, 'eee, MMMM do')}</Tooltip.Header>

diff --git a/packages/layerchart/src/routes/docs/components/Tooltip/+page.ts b/packages/layerchart/src/routes/docs/components/Tooltip/+page.ts
@@ -26,7 +26,7 @@ export async function load() {
           'mix and match',
         ],
         'Multiple instances',
-        'Maintain within chart container, or overflow outside',
+        'Maintain within chart container, window/viewport, or overflow outside',
       ],
       related: ['components/TooltipContext', 'components/Highlight'],
     },