From 5c3c70e249a43d72df36dfd2c98579b60563b186 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sun, 6 Dec 2020 04:51:51 -0800
Subject: [PATCH] docs(tooltip): add reactive example, hidden icon example

---
 docs/src/pages/components/Tooltip.svx         | 12 ++++++++++
 .../framed/Tooltip/TooltipReactive.svelte     | 23 +++++++++++++++++++
 2 files changed, 35 insertions(+)
 create mode 100644 docs/src/pages/framed/Tooltip/TooltipReactive.svelte

diff --git a/docs/src/pages/components/Tooltip.svx b/docs/src/pages/components/Tooltip.svx
index a9deb31b..f4f6d538 100644
--- a/docs/src/pages/components/Tooltip.svx
+++ b/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>
\ No newline at end of file
diff --git a/docs/src/pages/framed/Tooltip/TooltipReactive.svelte b/docs/src/pages/framed/Tooltip/TooltipReactive.svelte
new file mode 100644
index 00000000..8d131ae1
--- /dev/null
+++ b/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>