From b6edba912b7aa514f829c1fb3e004848bf6820a0 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Thu, 25 Aug 2022 17:22:18 -0400
Subject: [PATCH] fixes #873

---
 docs/components/tooltip.md               | 20 ++++++++++++++++++++
 src/components/tooltip/tooltip.styles.ts |  1 +
 src/components/tooltip/tooltip.ts        |  2 +-
 3 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/docs/components/tooltip.md b/docs/components/tooltip.md
index cd6d92aa7..db5307b12 100644
--- a/docs/components/tooltip.md
+++ b/docs/components/tooltip.md
@@ -343,6 +343,26 @@ const App = () => (
 );
 ```
 
+### Setting a Maximum Width
+
+Use the `--max-width` custom property to change the width the tooltip can grow to before wrapping occurs.
+
+```html preview
+<sl-tooltip style="--max-width: 80px;" content="This tooltip will wrap after only 80 pixels.">
+  <sl-button>Hover me</sl-button>
+</sl-tooltip>
+```
+
+```jsx react
+import { SlButton, SlTooltip } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlTooltip style={{ '--max-width': '80px' }} content="This tooltip will wrap after only 80 pixels.">
+    <SlButton>Hover Me</SlButton>
+  </SlTooltip>
+);
+```
+
 ### Hoisting
 
 Tooltips will be clipped if they're inside a container that has `overflow: auto|hidden|scroll`. The `hoist` attribute forces the tooltip to use a fixed positioning strategy, allowing it to break out of the container. In this case, the tooltip will be positioned relative to its containing block, which is usually the viewport unless an ancestor uses a `transform`, `perspective`, or `filter`. [Refer to this page](https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed) for more details.
diff --git a/src/components/tooltip/tooltip.styles.ts b/src/components/tooltip/tooltip.styles.ts
index 4ffeb1301..7bae9a385 100644
--- a/src/components/tooltip/tooltip.styles.ts
+++ b/src/components/tooltip/tooltip.styles.ts
@@ -39,6 +39,7 @@ export default css`
   }
 
   .tooltip__body {
+    width: max-content;
     max-width: var(--max-width);
     border-radius: var(--sl-tooltip-border-radius);
     background-color: var(--sl-tooltip-background-color);
diff --git a/src/components/tooltip/tooltip.ts b/src/components/tooltip/tooltip.ts
index 093a2cea9..a20a51df6 100644
--- a/src/components/tooltip/tooltip.ts
+++ b/src/components/tooltip/tooltip.ts
@@ -31,7 +31,7 @@ import type { CSSResultGroup } from 'lit';
  * @csspart base__arrow - The popup's `arrow` part. Use this to target the tooltip's arrow.
  * @csspart body - The tooltip's body.
  *
- * @cssproperty --max-width - The maximum width of the tooltip.
+ * @cssproperty --max-width - The maximum width of the tooltip before its content will wrap.
  * @cssproperty --hide-delay - The amount of time to wait before hiding the tooltip when hovering.
  * @cssproperty --show-delay - The amount of time to wait before showing the tooltip when hovering.
  *