From 95b3226ac46a1a3ff2cd459cfa1e8919d125a9c2 Mon Sep 17 00:00:00 2001
From: Tucker McCoy <tuckermmccoy@gmail.com>
Date: Thu, 10 Sep 2026 07:47:29 -0400
Subject: [PATCH] fix(tooltip): cap the content width at the space Radix
 measures

TooltipContent set no max-width at all, so every consumer had to cap it
themselves or let long content run the tooltip off screen. Studio was doing
exactly that at eight call sites behind a token of its own.

Give the component the default. The value has to live in the @theme inline
block: a plain @theme declares the token on :root, where
--radix-tooltip-content-available-width does not exist, so the var() collapses
to its 100vw fallback before it ever reaches the tooltip. Inlined, the
declaration lands on the content element -- the same element Radix sets the
variable on -- and the measurement survives, collision padding included.

.tooltip-content is unlayered and so beats a plain utility, which the docs now
say, along with the token to retheme.

Co-authored-by: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 packages/demo/src/content/components/tooltip.mdx     | 12 ++++++++++++
 packages/ui/package.json                             |  2 +-
 .../ui/src/components/tooltip/tooltip.module.css     |  2 +-
 packages/ui/src/theme/theme-base.css                 |  3 +++
 4 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/packages/demo/src/content/components/tooltip.mdx b/packages/demo/src/content/components/tooltip.mdx
index 4f8962f0..78bb3c97 100644
--- a/packages/demo/src/content/components/tooltip.mdx
+++ b/packages/demo/src/content/components/tooltip.mdx
@@ -56,6 +56,18 @@ Use `side` and `align` on `TooltipContent` to position the tooltip relative to i
 </TooltipContent>
 ```
 
+## Width
+
+`TooltipContent` caps itself at `32rem`, and narrows further to the room Radix measures when the trigger sits near a viewport edge, so long content wraps instead of running off screen. Retheme the `--container-tooltip` token to move the cap everywhere.
+
+For a one-off, mark the override important — the component's own styles sit outside Tailwind's layers, so a plain utility loses to them:
+
+```tsx
+<TooltipContent className="max-w-md!">
+  <p>Narrower than the default</p>
+</TooltipContent>
+```
+
 ## Slots
 
 | Name              | Description                                                                            |
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 2d933c08..27c4a037 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -2,7 +2,7 @@
   "name": "@eqtylab/equality",
   "description": "EQTYLab's component and token-based design system",
   "homepage": "https://equality.eqtylab.io/",
-  "version": "3.3.0",
+  "version": "3.3.1",
   "license": "Apache-2.0",
   "keywords": [
     "component library",
diff --git a/packages/ui/src/components/tooltip/tooltip.module.css b/packages/ui/src/components/tooltip/tooltip.module.css
index 53d3aeb6..6d4e2e16 100644
--- a/packages/ui/src/components/tooltip/tooltip.module.css
+++ b/packages/ui/src/components/tooltip/tooltip.module.css
@@ -2,7 +2,7 @@
 
 .tooltip-content {
   @apply z-highest;
-  @apply overflow-hidden rounded-md;
+  @apply max-w-tooltip overflow-hidden rounded-md;
   @apply border-border-overlay bg-background-overlay border;
   @apply shadow-shadow-overlay shadow-sm;
   @apply text-text-primary text-sm;
diff --git a/packages/ui/src/theme/theme-base.css b/packages/ui/src/theme/theme-base.css
index 39073544..d92551ab 100644
--- a/packages/ui/src/theme/theme-base.css
+++ b/packages/ui/src/theme/theme-base.css
@@ -13,6 +13,9 @@
   /* FONT SIZE */
   --text-xxs: 0.625rem;
 
+  /* CONTAINER — keep in this inline block; the Radix var exists only on the tooltip content element */
+  --container-tooltip: min(32rem, var(--radix-tooltip-content-available-width, 100vw));
+
   /* Z-INDEX */
   --z-index-behind: -1;
   --z-index-base: 0;