feat(tooltip-definition): export open prop, dispatch open/close events (#1057)

COMPONENT_INDEX.md

@@ -4692,6 +4692,7 @@ None.
 | Prop name   | Kind             | Reactive | Type                                              | Default value                                    | Description                                           |
 | :---------- | :--------------- | :------- | :------------------------------------------------ | ------------------------------------------------ | ----------------------------------------------------- |
 | ref         | <code>let</code> | Yes      | <code>null &#124; HTMLButtonElement</code>        | <code>null</code>                                | Obtain a reference to the button HTML element         |
+| open        | <code>let</code> | Yes      | <code>boolean</code>                              | <code>false</code>                               | Set to `true` to open the tooltip                     |
 | tooltipText | <code>let</code> | No       | <code>string</code>                               | <code>""</code>                                  | Specify the tooltip text                              |
 | align       | <code>let</code> | No       | <code>"start" &#124; "center" &#124; "end"</code> | <code>"center"</code>                            | Set the alignment of the tooltip relative to the icon |
 | direction   | <code>let</code> | No       | <code>"top" &#124; "bottom"</code>                | <code>"bottom"</code>                            | Set the direction of the tooltip relative to the icon |
@@ -4706,13 +4707,15 @@ None.
 
 ### Events
 
-| Event name | Type      | Detail |
+| Event name | Type       | Detail           |
-| :--------- | :-------- | :----- |
+| :--------- | :--------- | :--------------- |
-| click      | forwarded | --     |
+| open       | dispatched | <code>any</code> |
-| mouseover  | forwarded | --     |
+| close      | dispatched | <code>any</code> |
-| mouseenter | forwarded | --     |
+| click      | forwarded  | --               |
-| mouseleave | forwarded | --     |
+| mouseover  | forwarded  | --               |
-| focus      | forwarded | --     |
+| mouseenter | forwarded  | --               |
+| mouseleave | forwarded  | --               |
+| focus      | forwarded  | --               |
 
 ## `TooltipFooter`
 

docs/src/COMPONENT_API.json

@@ -13110,6 +13110,17 @@
           "constant": false,
           "reactive": false
         },
+        {
+          "name": "open",
+          "kind": "let",
+          "description": "Set to `true` to open the tooltip",
+          "type": "boolean",
+          "value": "false",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "constant": false,
+          "reactive": true
+        },
         {
           "name": "align",
           "kind": "let",
@@ -13165,6 +13176,8 @@
         }
       ],
       "events": [
+        { "type": "dispatched", "name": "open", "detail": "any" },
+        { "type": "dispatched", "name": "close", "detail": "any" },
         { "type": "forwarded", "name": "click", "element": "button" },
         { "type": "forwarded", "name": "mouseover", "element": "button" },
         { "type": "forwarded", "name": "mouseenter", "element": "button" },

src/TooltipDefinition/TooltipDefinition.svelte

@@ -1,7 +1,17 @@
 <script>
+  /**
+   * @event {any} open
+   * @event {any} close
+   */
+
   /** Specify the tooltip text */
   export let tooltipText = "";
 
+  /**
+   * Set to `true` to open the tooltip
+   */
+  export let open = false;
+
   /**
    * Set the alignment of the tooltip relative to the icon
    * @type {"start" | "center" | "end"}
@@ -20,15 +30,15 @@
   /** Obtain a reference to the button HTML element */
   export let ref = null;
 
-  let visible = false;
+  import { createEventDispatcher } from "svelte";
 
-  function hide() {
+  const dispatch = createEventDispatcher();
-    visible = false;
-  }
 
-  function show() {
+  const hide = () => (open = false);
-    visible = true;
+
-  }
+  const show = () => (open = true);
+
+  $: dispatch(open ? "open" : "close");
 </script>
 
 <svelte:window
@@ -51,8 +61,8 @@
     class:bx--tooltip--a11y="{true}"
     class:bx--tooltip__trigger="{true}"
     class:bx--tooltip__trigger--definition="{true}"
-    class:bx--tooltip--hidden="{!visible}"
+    class:bx--tooltip--hidden="{!open}"
-    class:bx--tooltip--visible="{visible}"
+    class:bx--tooltip--visible="{open}"
     class:bx--tooltip--top="{direction === 'top'}"
     class:bx--tooltip--bottom="{direction === 'bottom'}"
     class:bx--tooltip--align-start="{align === 'start'}"

tests/TooltipDefinition.test.svelte

@@ -1,8 +1,13 @@
 <script lang="ts">
   import { TooltipDefinition } from "../types";
+
+  let open = false;
 </script>
 
 <TooltipDefinition
+  bind:open
+  on:open
+  on:close
   tooltipText="IBM Corporate Headquarters is based in Armonk, New York."
 >
   Armonk

types/TooltipDefinition/TooltipDefinition.svelte.d.ts

@@ -9,6 +9,12 @@ export interface TooltipDefinitionProps
    */
   tooltipText?: string;
 
+  /**
+   * Set to `true` to open the tooltip
+   * @default false
+   */
+  open?: boolean;
+
   /**
    * Set the alignment of the tooltip relative to the icon
    * @default "center"
@@ -37,6 +43,8 @@ export interface TooltipDefinitionProps
 export default class TooltipDefinition extends SvelteComponentTyped<
   TooltipDefinitionProps,
   {
+    open: CustomEvent<any>;
+    close: CustomEvent<any>;
     click: WindowEventMap["click"];
     mouseover: WindowEventMap["mouseover"];
     mouseenter: WindowEventMap["mouseenter"];