From 6ae0e31011ed9834f74723178b48c726b3214b0f Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Tue, 20 Oct 2020 11:41:45 -0700
Subject: [PATCH] refactor(tooltip-definition): remove hidden variable

---
 .../pages/components/TooltipDefinition.svx    |  8 +++--
 .../TooltipDefinition.svelte                  | 31 +++++++++----------
 2 files changed, 21 insertions(+), 18 deletions(-)

diff --git a/docs/src/pages/components/TooltipDefinition.svx b/docs/src/pages/components/TooltipDefinition.svx
index 2633be67..0de51580 100644
--- a/docs/src/pages/components/TooltipDefinition.svx
+++ b/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
diff --git a/src/TooltipDefinition/TooltipDefinition.svelte b/src/TooltipDefinition/TooltipDefinition.svelte
index b2486ec3..957eb2f3 100644
--- a/src/TooltipDefinition/TooltipDefinition.svelte
+++ b/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,9 +67,8 @@
     on:mouseenter
     on:mouseleave
     on:focus
-    on:focus="{() => {
-      hidden = false;
-    }}"
+    on:focus="{show}"
+    on:blur="{hide}"
   >
     <slot />
   </button>