Merge branch 'tooltip-definition'

docs/src/PUBLIC_API.json

@@ -15506,14 +15506,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,
-            "end": 1488,
+            "start": 1457,
+            "end": 1465,
             "type": "EventHandler",
             "name": "click",
             "modifiers": [],
@@ -15523,8 +15570,8 @@
         [
           "mouseover",
           {
-            "start": 1493,
-            "end": 1505,
+            "start": 1470,
+            "end": 1482,
             "type": "EventHandler",
             "name": "mouseover",
             "modifiers": [],
@@ -15534,8 +15581,8 @@
         [
           "mouseenter",
           {
-            "start": 1510,
-            "end": 1523,
+            "start": 1487,
+            "end": 1500,
             "type": "EventHandler",
             "name": "mouseenter",
             "modifiers": [],
@@ -15545,8 +15592,8 @@
         [
           "mouseleave",
           {
-            "start": 1528,
-            "end": 1541,
+            "start": 1505,
+            "end": 1518,
             "type": "EventHandler",
             "name": "mouseleave",
             "modifiers": [],
@@ -15556,8 +15603,8 @@
         [
           "focus",
           {
-            "start": 1546,
-            "end": 1554,
+            "start": 1523,
+            "end": 1531,
             "type": "EventHandler",
             "name": "focus",
             "modifiers": [],

docs/src/pages/components/TooltipDefinition.svx

@@ -3,14 +3,27 @@
   import Preview from "../../components/Preview.svelte";
 </script>
 
-### Default ("bottom" direction, "center" aligned)
+### Default
 
 <TooltipDefinition tooltipText="IBM Corporate Headquarters is based in Armonk, New York.">
   Armonk
 </TooltipDefinition>
 
-### Custom direction, alignment
+### Custom tooltip direction and alignment
+
+Customize the tooltip menu direction and alignment through the `direction` and `align` props.
+
+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

@@ -29,28 +29,28 @@
    */
   export let ref = null;
 
-  $: hidden = false;
-  $: visible = false;
+  let visible = false;
+
+  function hide() {
+    visible = false;
+  }
+
+  function show() {
+    visible = true;
+  }
 </script>
 
 <svelte:body
   on:keydown="{({ key }) => {
-    if (key === 'Escape') {
-      hidden = true;
-    }
+    if (key === 'Escape') hide();
   }}" />
 
 <div
   class:bx--tooltip--definition="{true}"
   class:bx--tooltip--a11y="{true}"
   {...$$restProps}
-  on:mouseenter="{() => {
-    hidden = false;
-    visible = true;
-  }}"
-  on:mouseleave="{() => {
-    visible = false;
-  }}"
+  on:mouseenter="{show}"
+  on:mouseleave="{hide}"
 >
   <button
     bind:this="{ref}"
@@ -58,7 +58,7 @@
     class:bx--tooltip--a11y="{true}"
     class:bx--tooltip__trigger="{true}"
     class:bx--tooltip__trigger--definition="{true}"
-    class:bx--tooltip--hidden="{hidden}"
+    class:bx--tooltip--hidden="{!visible}"
     class:bx--tooltip--visible="{visible}"
     class="{direction && `bx--tooltip--${direction}`}
       {align && `bx--tooltip--align-${align}`}"
@@ -67,13 +67,12 @@
     on:mouseenter
     on:mouseleave
     on:focus
-    on:focus="{() => {
-      hidden = false;
-    }}"
+    on:focus="{show}"
+    on:blur="{hide}"
   >
     <slot />
   </button>
   <div role="tooltip" id="{id}" class:bx--assistive-text="{true}">
-    {tooltipText}
+    <slot name="tooltip">{tooltipText}</slot>
   </div>
 </div>

types/index.d.ts

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