From 4e5b0e06dc1f470a21d47d6888c8333f8fdbfdd3 Mon Sep 17 00:00:00 2001
From: Denis Korablev <timefordroids@users.noreply.github.com>
Date: Mon, 8 Feb 2021 19:37:50 +0400
Subject: [PATCH] Add content slot to tooltip (#322)

---
 docs/components/tooltip.md         | 10 ++++++++++
 src/components/tooltip/tooltip.tsx |  3 ++-
 2 files changed, 12 insertions(+), 1 deletion(-)

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