Close tooltip on mousedown event, add reactive, hidden icon examples (#450)

* fix(tooltip): close tooltip on mousedown event

- remove blur event from tooltip; stop click, mouse propagation on tooltip content
- remove tabindex from open tooltip to prevent outline ring
- refocus trigger icon or trigger text when closing
- remove useless programmatic variable

* docs(tooltip): add reactive example, hidden icon example

docs/src/pages/components/Tooltip.svx

@@ -20,6 +20,10 @@
   </p>
 </Tooltip>
 
+### Reactive example
+
+<FileSource src="/framed/Tooltip/TooltipReactive" />
+
 ### Directions
 
 <Tooltip triggerText="Top" direction="top"><p>Top</p></Tooltip>
@@ -60,4 +64,12 @@
   <p>
     Resources are provisioned based on your account's organization.
   </p>
+</Tooltip>
+
+### Hidden icon
+
+<Tooltip hideIcon triggerText="Resource list">
+  <p>
+    Resources are provisioned based on your account's organization.
+  </p>
 </Tooltip>

docs/src/pages/framed/Tooltip/TooltipReactive.svelte

@@ -0,0 +1,23 @@
+<script>
+  import { Tooltip, Button } from "carbon-components-svelte";
+
+  let open = true;
+</script>
+
+<style>
+  div {
+    margin-top: var(--cds-spacing-05);
+  }
+</style>
+
+<Tooltip bind:open triggerText="Resource list" align="start">
+  <p>Resources are provisioned based on your account's organization.</p>
+</Tooltip>
+
+<div style="margin-top: var(--cds-spacing-12);">
+  <Button size="small" on:click="{() => (open = !open)}">
+    {open ? 'Close tooltip' : 'Open tooltip'}
+  </Button>
+</div>
+
+<div>Open: {open}</div>