diff --git a/docs/components/tooltip.md b/docs/components/tooltip.md
index bbf635b14..2ab8a1a75 100644
--- a/docs/components/tooltip.md
+++ b/docs/components/tooltip.md
@@ -163,5 +163,15 @@ To override it globally, set it in a root block in your stylesheet after `shoela
 }
 ```
 
+### Custom content
+
+Use the `content` slot to pass an element to the tooltip.
+
+```html preview
+<sl-tooltip>
+  <sl-button>Hover me</sl-button>
+  <strong slot="content">Bolded content</strong>
+</sl-tooltip>
+```
 
 [component-metadata:sl-tooltip]
diff --git a/src/components/tooltip/tooltip.tsx b/src/components/tooltip/tooltip.tsx
index 8edc03e88..0bb129903 100644
--- a/src/components/tooltip/tooltip.tsx
+++ b/src/components/tooltip/tooltip.tsx
@@ -8,6 +8,7 @@ let id = 0;
  * @status stable
  *
  * @slot - The tooltip's target element. Only the first element will be used as the target.
+ * @slot content - The tooltip's content. Alternatively, you can use the content prop.
  *
  * @part base - The component's base wrapper.
  */
@@ -253,7 +254,7 @@ export class Tooltip {
               role="tooltip"
               aria-hidden={this.open ? 'false' : 'true'}
             >
-              {this.content}
+              <slot name="content">{this.content}</slot>
             </div>
           </div>
         )}