fix(ToolTip): better toggling logic (#885)

* fix(ToolTip): better toggling logic

* fix(ToolTip): remove redundant click handler

* fix(ToolTip): ensure at most one ToolTip is open at the same time

- a click event closes the tooltip if the target is not the tooltip or
  the tooltip icon.
- the event is registered in the capture phase and a `setTimeout` is used to
  deal with edge cases in which a button is used to toggle the tooltip
  on or off.

src/Tooltip/Tooltip.svelte

@@ -89,10 +89,19 @@
     }
   }
 
-  function openMenu() {
+  function onFocus() {
     open = true;
   }
 
+  function onMousedown() {
+    // determine the desired state before the focus event triggers.
+    const shouldClose = open;
+    // ensure changes are scheduled at the end, i.e. after the possible focus event.
+    setTimeout(() => {
+      open = shouldClose ? false : true;
+    });
+  }
+
   afterUpdate(() => {
     if (open) {
       const button = ref.getBoundingClientRect();
@@ -173,8 +182,13 @@
           ref.focus();
         }
       }
-
+    }
-      open = false;
+  }}"
+  on:click|capture="{({ target }) => {
+    if (open && !ref.contains(target) && !refTooltip.contains(target)) {
+      setTimeout(() => {
+        open = false;
+      });
     }
   }}"
 />
@@ -190,8 +204,8 @@
         bind:this="{refIcon}"
         {...buttonProps}
         aria-describedby="{tooltipId}"
-        on:click|preventDefault|stopPropagation="{openMenu}"
+        on:mousedown="{onMousedown}"
-        on:focus="{openMenu}"
+        on:focus="{onFocus}"
         on:blur="{onBlur}"
         on:keydown="{onKeydown}"
       >
@@ -205,8 +219,8 @@
       bind:this="{ref}"
       {...buttonProps}
       aria-describedby="{tooltipId}"
-      on:click|preventDefault|stopPropagation="{openMenu}"
+      on:mousedown="{onMousedown}"
-      on:focus="{openMenu}"
+      on:focus="{onFocus}"
       on:blur="{onBlur}"
       on:keydown="{onKeydown}"
     >