fix: constrain Tooltip popup width to available viewport space (#530)

Author: mattrothenberg

.changeset/tooltip-overflow-constraint.md

@@ -0,0 +1,5 @@
+---
+"@cloudflare/kumo": patch
+---
+
+Fix Tooltip popup overflowing viewport when content is wider than available space. The popup now constrains its width to `var(--available-width)`, a CSS variable provided by Base UI's Positioner that reflects the space between the trigger and the viewport edge.

packages/kumo-docs-astro/src/components/demos/TooltipDemo.tsx

@@ -1,5 +1,5 @@
-import { Tooltip, TooltipProvider, Button } from "@cloudflare/kumo";
-import { Info, PlusIcon, TranslateIcon } from "@phosphor-icons/react";
+import { Tooltip, TooltipProvider, Button } from '@cloudflare/kumo';
+import { Info, PlusIcon, TranslateIcon } from '@phosphor-icons/react';
 
 export function TooltipHeroDemo() {
   return (
@@ -71,6 +71,43 @@ export function TooltipCustomTriggerDemo() {
  * Control the delay before opening and closing the tooltip.
  * `delay` controls open delay (default: 600ms), `closeDelay` controls close delay (default: 0ms).
  */
+/**
+ * Demonstrates that long tooltip content respects available viewport space.
+ * Tooltips near the edge of the viewport constrain their width to
+ * `--available-width` so they don't overflow.
+ */
+export function TooltipOverflowDemo() {
+  const longContent =
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.';
+  return (
+    <TooltipProvider>
+      <div className="flex w-full justify-between">
+        <Tooltip
+          content={longContent}
+          side="bottom"
+          render={<Button variant="secondary" />}
+        >
+          Near left edge
+        </Tooltip>
+        <Tooltip
+          content={longContent}
+          side="bottom"
+          render={<Button variant="secondary" />}
+        >
+          Centered
+        </Tooltip>
+        <Tooltip
+          content={longContent}
+          side="bottom"
+          render={<Button variant="secondary" />}
+        >
+          Near right edge
+        </Tooltip>
+      </div>
+    </TooltipProvider>
+  );
+}
+
 export function TooltipDelayDemo() {
   return (
     <TooltipProvider>

packages/kumo-docs-astro/src/pages/components/tooltip.mdx

@@ -14,6 +14,7 @@ import {
   TooltipBasicDemo,
   TooltipMultipleDemo,
   TooltipDelayDemo,
+  TooltipOverflowDemo,
 } from "~/components/demos/TooltipDemo";
 
 {/* Hero Demo */}
@@ -84,6 +85,17 @@ For delay grouping across multiple tooltips, see [TooltipProvider](#tooltipprovi
   <TooltipMultipleDemo client:load />
 </ComponentExample>
 
+### Long Content / Overflow
+
+<p>
+  Tooltips with long content automatically constrain their width to the available
+  viewport space using `--available-width` from Base UI's Positioner. Hover over
+  the edge buttons to see the tooltip wrap instead of overflowing the viewport.
+</p>
+<ComponentExample demo="TooltipOverflowDemo">
+  <TooltipOverflowDemo client:load />
+</ComponentExample>
+
 ### Delay Control
 
 <p>

packages/kumo/src/components/tooltip/tooltip.tsx

@@ -183,7 +183,7 @@ export function Tooltip({
         {asChild ? undefined : (children as ReactNode)}
       </TooltipBase.Trigger>
       <TooltipBase.Portal container={container}>
-        <TooltipBase.Positioner align={align} side={side} sideOffset={10}>
+        <TooltipBase.Positioner align={align} side={side} sideOffset={10} className="max-w-[var(--available-width)]">
           <TooltipBase.Popup
             className={cn(
               "flex origin-[var(--transform-origin)] flex-col rounded-md bg-kumo-base px-2.5 py-1.5 text-sm text-kumo-default",