fixes #873

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.

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);

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.
  *