diff --git a/docs/src/pages/components/Popover.svx b/docs/src/pages/components/Popover.svx
index d756b572..75622734 100644
--- a/docs/src/pages/components/Popover.svx
+++ b/docs/src/pages/components/Popover.svx
@@ -36,12 +36,6 @@ Set `closeOnOutsideClick` to set `open` to `false` when clicking outside of the
     </Popover>
 </div>
 
-## Manage open state with a Button
-
-You can bind the `open` prop and manage the open state of the popover with an external button.
-
-<FileSource src="/framed/Popover/WithButton" />
-
 ## Popover alignment
 
 Customize the popover alignment using the `align` prop. Valid values include: `"top" | "top-left" | "top-right" | "bottom" | "bottom-left" | "bottom-right" | "left" | "left-bottom" | "left-top" | "right" | "right-bottom" | "right-top"`.
@@ -153,4 +147,10 @@ Possible `align` values include `"top"`, `"top-left"`, `"top-right"`, `"bottom"`
     <Popover highContrast open>
         <div style="padding: var(--cds-spacing-05)">Content</div>
     </Popover>
-</div>
\ No newline at end of file
+</div>
+
+## External element
+
+Use the `open` prop to manage state with an external element, like a button.
+
+<FileSource src="/framed/Popover/WithButton" />
\ No newline at end of file
diff --git a/docs/src/pages/framed/Popover/WithButton.svelte b/docs/src/pages/framed/Popover/WithButton.svelte
index fd3b6951..6b3709c7 100644
--- a/docs/src/pages/framed/Popover/WithButton.svelte
+++ b/docs/src/pages/framed/Popover/WithButton.svelte
@@ -2,36 +2,19 @@
   import { Popover, Button } from "carbon-components-svelte";
 
   let open = true;
-  let containerRef = null;
+  let ref = null;
 </script>
 
-<div data-outline>
-  <div
-    bind:this="{containerRef}"
-    style:position="relative"
-    style:display="inline-block"
+<div bind:this="{ref}" style:position="relative">
+  <Button on:click="{() => (open = !open)}">Toggle popover</Button>
+  <Popover
+    bind:open
+    align="bottom-left"
+    on:click:outside="{({ detail }) => {
+      console.log('on:click:outside');
+      open = ref.contains(detail.target);
+    }}"
   >
-    <Button on:click="{() => (open = !open)}">Click to open</Button>
-    <Popover
-      bind:open
-      align="bottom-left"
-      on:click:outside="{({ detail }) => {
-        console.log('on:click:outside');
-        if (!containerRef.contains(detail.target)) {
-          open = false;
-        }
-      }}"
-    >
-      <div style="padding: var(--cds-spacing-05)">Content</div>
-    </Popover>
-  </div>
-  <div>
-    <br />
-    Anim eu laboris veniam in est elit ullamco enim irure id. Lorem est culpa ex
-    in enim enim. Culpa quis incididunt magna officia et aliqua. Ullamco deserunt
-    aute enim cupidatat. Culpa quis enim sint sint anim qui irure exercitation labore
-    occaecat in reprehenderit proident. Nisi laborum ut et amet commodo amet ullamco
-    commodo non aliqua magna ad eu. Ad aliquip minim nostrud id enim elit velit ullamco
-    pariatur eu excepteur pariatur cillum.
-  </div>
+    <div style="padding: var(--cds-spacing-05)">Content</div>
+  </Popover>
 </div>