refactor(tooltip-definition): remove hidden variable

docs/src/pages/components/TooltipDefinition.svx

@@ -3,13 +3,17 @@
   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

src/TooltipDefinition/TooltipDefinition.svelte

@@ -29,28 +29,28 @@
    */
   export let ref = null;
 
-  $: hidden = false;
+  let visible = false;
-  $: visible = false;
+
+  function hide() {
+    visible = false;
+  }
+
+  function show() {
+    visible = true;
+  }
 </script>
 
 <svelte:body
   on:keydown="{({ key }) => {
-    if (key === 'Escape') {
+    if (key === 'Escape') hide();
-      hidden = true;
-    }
   }}" />
 
 <div
   class:bx--tooltip--definition="{true}"
   class:bx--tooltip--a11y="{true}"
   {...$$restProps}
-  on:mouseenter="{() => {
+  on:mouseenter="{show}"
-    hidden = false;
+  on:mouseleave="{hide}"
-    visible = true;
-  }}"
-  on:mouseleave="{() => {
-    visible = false;
-  }}"
 >
   <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,9 +67,8 @@
     on:mouseenter
     on:mouseleave
     on:focus
-    on:focus="{() => {
+    on:focus="{show}"
-      hidden = false;
+    on:blur="{hide}"
-    }}"
   >
     <slot />
   </button>