feat(tooltip-definition): make tooltipText slottable

docs/src/PUBLIC_API.json

@@ -2089,8 +2089,8 @@
         [
           "click",
           {
-            "start": 2342,
+            "start": 2355,
-            "end": 2350,
+            "end": 2363,
             "type": "EventHandler",
             "name": "click",
             "modifiers": [],
@@ -2100,8 +2100,8 @@
         [
           "mouseover",
           {
-            "start": 2486,
+            "start": 2499,
-            "end": 2498,
+            "end": 2511,
             "type": "EventHandler",
             "name": "mouseover",
             "modifiers": [],
@@ -2111,8 +2111,8 @@
         [
           "mouseenter",
           {
-            "start": 2501,
+            "start": 2514,
-            "end": 2514,
+            "end": 2527,
             "type": "EventHandler",
             "name": "mouseenter",
             "modifiers": [],
@@ -2122,8 +2122,8 @@
         [
           "mouseleave",
           {
-            "start": 2517,
+            "start": 2530,
-            "end": 2530,
+            "end": 2543,
             "type": "EventHandler",
             "name": "mouseleave",
             "modifiers": [],
@@ -2133,8 +2133,8 @@
         [
           "transitionend",
           {
-            "start": 2533,
+            "start": 2546,
-            "end": 2549,
+            "end": 2562,
             "type": "EventHandler",
             "name": "transitionend",
             "modifiers": [],
@@ -15497,14 +15497,61 @@
             "default": true,
             "default_value": ""
           }
+        ],
+        [
+          "tooltip",
+          {
+            "attributes": [
+              {
+                "start": 1681,
+                "end": 1695,
+                "type": "Attribute",
+                "name": "name",
+                "value": [
+                  {
+                    "start": 1687,
+                    "end": 1694,
+                    "type": "Text",
+                    "raw": "tooltip",
+                    "data": "tooltip"
+                  }
+                ]
+              }
+            ],
+            "children": [
+              {
+                "start": 1696,
+                "end": 1709,
+                "type": "MustacheTag",
+                "expression": {
+                  "type": "Identifier",
+                  "start": 1697,
+                  "end": 1708,
+                  "loc": {
+                    "start": {
+                      "line": 76,
+                      "column": 26
+                    },
+                    "end": {
+                      "line": 76,
+                      "column": 37
+                    }
+                  },
+                  "name": "tooltipText"
+                }
+              }
+            ],
+            "default": false,
+            "default_value": "{tooltipText}\n"
+          }
         ]
       ],
       "forwarded_events": [
         [
           "click",
           {
-            "start": 1480,
+            "start": 1457,
-            "end": 1488,
+            "end": 1465,
             "type": "EventHandler",
             "name": "click",
             "modifiers": [],
@@ -15514,8 +15561,8 @@
         [
           "mouseover",
           {
-            "start": 1493,
+            "start": 1470,
-            "end": 1505,
+            "end": 1482,
             "type": "EventHandler",
             "name": "mouseover",
             "modifiers": [],
@@ -15525,8 +15572,8 @@
         [
           "mouseenter",
           {
-            "start": 1510,
+            "start": 1487,
-            "end": 1523,
+            "end": 1500,
             "type": "EventHandler",
             "name": "mouseenter",
             "modifiers": [],
@@ -15536,8 +15583,8 @@
         [
           "mouseleave",
           {
-            "start": 1528,
+            "start": 1505,
-            "end": 1541,
+            "end": 1518,
             "type": "EventHandler",
             "name": "mouseleave",
             "modifiers": [],
@@ -15547,8 +15594,8 @@
         [
           "focus",
           {
-            "start": 1546,
+            "start": 1523,
-            "end": 1554,
+            "end": 1531,
             "type": "EventHandler",
             "name": "focus",
             "modifiers": [],

docs/src/pages/components/TooltipDefinition.svx

@@ -18,3 +18,12 @@ By default, `direction` is `"bottom"` and `align` is `"center"`.
 <TooltipDefinition direction="top" align="start" tooltipText="IBM Corporate Headquarters is based in Armonk, New York.">
   Armonk
 </TooltipDefinition>
+
+### Custom tooltip slot
+
+<TooltipDefinition>
+  Armonk
+  <span slot="tooltip" style="color: red">
+    IBM Corporate Headquarters is based in Armonk, New York.
+  </span>
+</TooltipDefinition>

src/TooltipDefinition/TooltipDefinition.svelte

@@ -73,6 +73,6 @@
     <slot />
   </button>
   <div role="tooltip" id="{id}" class:bx--assistive-text="{true}">
-    {tooltipText}
+    <slot name="tooltip">{tooltipText}</slot>
   </div>
 </div>

types/index.d.ts

@@ -5174,7 +5174,7 @@ export class TooltipDefinition extends CarbonSvelteComponent {
     ref?: null | HTMLButtonElement;
   };
 
-  $$slot_def: { default: {} };
+  $$slot_def: { default: {}; tooltip: {} };
 }
 
 export class TooltipIcon extends CarbonSvelteComponent {