diff --git a/packages/demo/src/content/components/tooltip.mdx b/packages/demo/src/content/components/tooltip.mdx index 4f8962f..78bb3c9 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 ``` +## 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 + +

Narrower than the default

+
+``` + ## Slots | Name | Description | diff --git a/packages/ui/package.json b/packages/ui/package.json index 2d933c0..27c4a03 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 53d3aeb..6d4e2e1 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 3907354..d92551a 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;