diff --git a/docs/src/pages/components/Popover.svx b/docs/src/pages/components/Popover.svx
index aaa86aa2b5..acd5ac4ce9 100644
--- a/docs/src/pages/components/Popover.svx
+++ b/docs/src/pages/components/Popover.svx
@@ -3,7 +3,8 @@ components: ["Popover", "PopoverContent"]
 ---
 
 <script>
-  import { Popover, PopoverContent } from "carbon-components-svelte";
+  import { Button, Popover, PopoverContent } from "carbon-components-svelte";
+  import FavoriteFilled from "carbon-icons-svelte/lib/FavoriteFilled.svelte";
   import Preview from "../../components/Preview.svelte";
 </script>
 
@@ -11,34 +12,29 @@ components: ["Popover", "PopoverContent"]
 
 By default, the position of the popover component is absolute.
 
-<div data-outline>
-    <Popover open>
-        Parent
-        <PopoverContent style="padding: var(--bx-spacing-05)">Content</PopoverContent>
-    </Popover>
-</div>
-
-## Relative position
-
-Set `relative` to `true` to use a relative position.
-
-<div data-outline>
-    Parent
-    <Popover relative open>
-        <div style="padding: var(--bx-spacing-05)">Content</div>
-    </Popover>
-</div>
+<Popover open>
+    <div data-outline>
+        <Button kind="tertiary" iconDescription="Popover example" icon={FavoriteFilled} />
+    </div>
+    <PopoverContent>
+        <h6>Available storage</h6>
+        <p>This server has 150 GB of block storage remaining.</p>
+    </PopoverContent>
+</Popover>
 
 ## Close on outside click
 
 Set `closeOnOutsideClick` to set `open` to `false` when clicking outside of the popover.
 
-<div data-outline>
-    Parent
-    <Popover open closeOnOutsideClick on:click:outside={() => {console.log('on:click:outside')}}>
-        <div style="padding: var(--bx-spacing-05)">Content</div>
-    </Popover>
-</div>
+<Popover open closeOnOutsideClick on:click:outside={() => {console.log('on:click:outside')}}>
+    <div data-outline>
+        <Button kind="tertiary" iconDescription="Popover example" icon={FavoriteFilled} />
+    </div>
+    <PopoverContent>
+        <h6>Available storage</h6>
+        <p>This server has 150 GB of block storage remaining.</p>
+    </PopoverContent>
+</Popover>
 
 ## Popover alignment
 
@@ -46,80 +42,98 @@ Customize the popover alignment using the `align` prop. Valid values include: `"
 
 The default `align` value is `"top"`.
 
-<div data-outline>
-    Parent
-    <Popover open align="top-left">
-        <div style="padding: var(--bx-spacing-05)">top-left</div>
-    </Popover>
+<Popover open align="top-left">
+    <div data-outline>
+    <Button kind="tertiary" iconDescription="Popover example" icon={FavoriteFilled} />
 </div>
-<div data-outline>
-    Parent
+<PopoverContent>
+    <p>Top-left alignment</p>
+</PopoverContent>
+</Popover>
+
+<div data-outline style="width:100%;padding:2em;display:flex;align-items:center;flex-direction:column;">
     <Popover open align="top-right">
-        <div style="padding: var(--bx-spacing-05)">top-right</div>
+        <Button kind="tertiary" iconDescription="Popover example" icon={FavoriteFilled} />
+        <PopoverContent>
+            <p>Top-right alignment</p>
+        </PopoverContent>
     </Popover>
 </div>
-<div data-outline>
-    Parent
+<div data-outline style="width:100%;padding:2em;display:flex;align-items:center;flex-direction:column;">
     <Popover open align="bottom">
-        <div style="padding: var(--bx-spacing-05)">bottom</div>
+        <Button kind="tertiary" iconDescription="Popover example" icon={FavoriteFilled} />
+        <PopoverContent>
+            <p>Bottom alignment</p>
+        </PopoverContent>
     </Popover>
 </div>
-<div data-outline>
-    Parent
+<div data-outline style="width:100%;padding:2em;display:flex;align-items:center;flex-direction:column;">
     <Popover open align="bottom-left">
-        <div style="padding: var(--bx-spacing-05)">bottom-left</div>
-    </Popover>
-</div>
-<div data-outline>
-    Parent
-    <Popover open align="bottom-right">
-        <div style="padding: var(--bx-spacing-05)">bottom-right</div>
+        <Button kind="tertiary" iconDescription="Popover example" icon={FavoriteFilled} />
+        <PopoverContent>
+            <p>Bottom-left alignment</p>
+        </PopoverContent>
     </Popover>
 </div>
-<div data-outline>
-    Parent
+<div data-outline style="width:100%;padding:2em;display:flex;align-items:center;flex-direction:column;">
     <Popover open align="left">
-        <div style="padding: var(--bx-spacing-05)">left</div>
+        <Button kind="tertiary" iconDescription="Popover example" icon={FavoriteFilled} />
+        <PopoverContent>
+            <p>Left alignment</p>
+        </PopoverContent>
     </Popover>
 </div>
-<div data-outline>
-    Parent
+<div data-outline style="width:100%;padding:2em;display:flex;align-items:center;flex-direction:column;">
     <Popover open align="left-bottom">
-        <div style="padding: var(--bx-spacing-05)">left-bottom</div>
+        <Button kind="tertiary" iconDescription="Popover example" icon={FavoriteFilled} />
+        <PopoverContent>
+            <p>Left-bottom alignment</p>
+        </PopoverContent>
     </Popover>
 </div>
-<div data-outline>
-    Parent
-    <Popover open align="left-right">
-        <div style="padding: var(--bx-spacing-05)">left-right</div>
+<div data-outline style="width:100%;padding:2em;display:flex;align-items:center;flex-direction:column;">
+    <Popover open align="left-top">
+        <Button kind="tertiary" iconDescription="Popover example" icon={FavoriteFilled} />
+        <PopoverContent>
+            <p>Left-top alignment</p>
+        </PopoverContent>
     </Popover>
 </div>
-<div data-outline>
-    Parent
+<div data-outline style="width:100%;padding:2em;display:flex;align-items:center;flex-direction:column;">
     <Popover open align="right">
-        <div style="padding: var(--bx-spacing-05)">right</div>
+        <Button kind="tertiary" iconDescription="Popover example" icon={FavoriteFilled} />
+        <PopoverContent>
+            <p>Right alignment</p>
+        </PopoverContent>
     </Popover>
 </div>
-<div data-outline>
-    Parent
+<div data-outline style="width:100%;padding:2em;display:flex;align-items:center;flex-direction:column;">
     <Popover open align="right-bottom">
-        <div style="padding: var(--bx-spacing-05)">right-bottom</div>
+        <Button kind="tertiary" iconDescription="Popover example" icon={FavoriteFilled} />
+        <PopoverContent>
+            <p>Right-bottom alignment</p>
+        </PopoverContent>
     </Popover>
 </div>
-<div data-outline>
-    Parent
+<div data-outline style="width:100%;padding:2em;display:flex;align-items:center;flex-direction:column;">
     <Popover open align="right-top">
-        <div style="padding: var(--bx-spacing-05)">right-top</div>
+        <Button kind="tertiary" iconDescription="Popover example" icon={FavoriteFilled} />
+        <PopoverContent>
+            <p>Right-top alignment</p>
+        </PopoverContent>
     </Popover>
 </div>
 
 ## With caret
 
-<div data-outline>
-    Parent
-    <Popover caret open>
-        <div style="padding: var(--bx-spacing-05)">Content</div>
-    </Popover>
+<div data-outline style="width:100%;padding:4em 0 1em 0;display:flex;align-items:center;flex-direction:column;">
+<Popover caret open>
+    <Button kind="tertiary" iconDescription="Popover example" icon={FavoriteFilled} />
+    <PopoverContent>
+        <h6>Available storage</h6>
+        <p>This server has 150 GB of block storage remaining.</p>
+    </PopoverContent>
+</Popover>
 </div>
 
 ## Custom caret alignment
@@ -128,29 +142,50 @@ By default, the caret is aligned "top".
 
 Possible `align` values include `"top"`, `"top-left"`, `"top-right"`, `"bottom"`, `"bottom-left"`, `"bottom-right"`, `"left"`, `"left-bottom"`, `"left-top"`, `"right"`, `"right-bottom"` or `"right-top"`.
 
-<div data-outline>
-    Parent
-    <Popover caret align="top-left" open>
-        <div style="padding: var(--bx-spacing-05)">Content</div>
-    </Popover>
+<div data-outline style="width:100%;padding:1em 0 1em 0;display:flex;align-items:center;flex-direction:column;">
+<Popover caret align="right-top" open>
+    <Button kind="tertiary" iconDescription="Popover example" icon={FavoriteFilled} />
+    <PopoverContent>
+        <h6>Available storage</h6>
+        <p>This server has 150 GB of block storage remaining.</p>
+    </PopoverContent>
+</Popover>
 </div>
 
 ## Light variant
 
-<div data-outline>
-    Parent
-    <Popover light open>
-        <div style="padding: var(--bx-spacing-05)">Content</div>
-    </Popover>
+<div data-outline style="width:100%;padding:4em 0 1em 0;display:flex;align-items:center;flex-direction:column;">
+<Popover light open>
+    <Button kind="tertiary" iconDescription="Popover example" icon={FavoriteFilled} />
+    <PopoverContent>
+        <h6>Available storage</h6>
+        <p>This server has 150 GB of block storage remaining.</p>
+    </PopoverContent>
+</Popover>
 </div>
 
 ## High contrast variant
 
-<div data-outline>
-    Parent
-    <Popover highContrast open>
-        <div style="padding: var(--bx-spacing-05)">Content</div>
-    </Popover>
+<div data-outline style="width:100%;padding:4em 0 1em 0;display:flex;align-items:center;flex-direction:column;">
+<Popover highContrast open>
+    <Button kind="tertiary" iconDescription="Popover example" icon={FavoriteFilled} />
+    <PopoverContent>
+        <h6>Available storage</h6>
+        <p>This server has 150 GB of block storage remaining.</p>
+    </PopoverContent>
+</Popover>
+</div>
+
+## Drop shadow
+
+<div data-outline style="width:100%;padding:4em 0 1em 0;display:flex;align-items:center;flex-direction:column;">
+<Popover dropShadow open>
+    <Button kind="tertiary" iconDescription="Popover example" icon={FavoriteFilled} />
+    <PopoverContent>
+        <h6>Available storage</h6>
+        <p>This server has 150 GB of block storage remaining.</p>
+    </PopoverContent>
+</Popover>
 </div>
 
 ## External element
diff --git a/docs/src/pages/framed/Popover/WithButton.svelte b/docs/src/pages/framed/Popover/WithButton.svelte
index c16d54d222..4ce200e816 100644
--- a/docs/src/pages/framed/Popover/WithButton.svelte
+++ b/docs/src/pages/framed/Popover/WithButton.svelte
@@ -1,20 +1,31 @@
 <script>
-  import { Popover, Button } from "carbon-components-svelte";
+  import { Popover, PopoverContent, Button } from "carbon-components-svelte";
 
   let open = true;
   let ref = null;
 </script>
 
 <div bind:this="{ref}" style:position="relative">
-  <Button on:click="{() => (open = !open)}">Toggle popover</Button>
-  <Popover
-    bind:open="{open}"
-    align="bottom-left"
-    on:click:outside="{({ detail }) => {
-      console.log('on:click:outside');
-      open = ref.contains(detail.target);
-    }}"
+  <div
+    data-outline
+    style="width:100%;padding:4em 0 1em 0;display:flex;align-items:center;flex-direction:column;"
   >
-    <div style="padding: var(--bx-spacing-05)">Content</div>
-  </Popover>
+    <Popover
+      bind:open="{open}"
+      align="bottom-left"
+      caret
+      on:click:outside="{({ detail }) => {
+        console.log('on:click:outside');
+        open = ref.contains(detail.target);
+      }}"
+    >
+      <Button on:click="{() => (open = !open)}">Toggle popover</Button>
+      <PopoverContent>
+        <div style="padding:0.5em;">
+          <h6>Available storage</h6>
+          <p>This server has 150 GB of block storage remaining.</p>
+        </div>
+      </PopoverContent>
+    </Popover>
+  </div>
 </div>
diff --git a/src/Popover/Popover.svelte b/src/Popover/Popover.svelte
index 3373b94dea..0a7b8968da 100644
--- a/src/Popover/Popover.svelte
+++ b/src/Popover/Popover.svelte
@@ -3,6 +3,9 @@
    * @event {{ target: HTMLElement; }} click:outside
    */
 
+  /** Set an id for the content `span` component */
+  export let id = "ccs-" + Math.random().toString(36);
+
   /** Set to `true` to display the popover */
   export let open = false;
 
@@ -21,11 +24,17 @@
   /** Set to `true` to enable the light variant */
   export let light = false;
 
+  /** Specify whether a drop shadow should be rendered on the popover */
+  export let dropShadow = false;
+
   /** Set to `true` to enable the high contrast variant */
   export let highContrast = false;
 
-  /** Set to `true` to use a relative position */
-  export let relative = false;
+  /**
+   * Specify the container `div` props
+   * @type {import('svelte/elements').HTMLDivAttributes}
+   */
+  export let containerProps = {};
 
   import { createEventDispatcher } from "svelte";
 
@@ -44,10 +53,12 @@
   }}"
 />
 
-<div
+<span
   bind:this="{ref}"
+  id="{id}"
   class:bx--popover-container="{true}"
   class:bx--popover--caret="{caret}"
+  class:bx--popover--drop-shadow="{dropShadow}"
   class:bx--popover--light="{light}"
   class:bx--popover--high-contrast="{highContrast}"
   class:bx--popover--top="{align === 'top'}"
@@ -63,9 +74,7 @@
   class:bx--popover--right-bottom="{align === 'right-bottom'}"
   class:bx--popover--right-top="{align === 'right-top'}"
   class:bx--popover--open="{open}"
-  class:bx--popover--relative="{relative}"
-  style:position="{relative ? "relative" : undefined}"
-  {...$$restProps}
+  {...containerProps}
 >
   <slot />
-</div>
+</span>
diff --git a/src/Popover/PopoverContent.svelte b/src/Popover/PopoverContent.svelte
index 4d30a3510c..b9cd51cd88 100644
--- a/src/Popover/PopoverContent.svelte
+++ b/src/Popover/PopoverContent.svelte
@@ -1,9 +1,13 @@
 <script>
-  export let className = null;
+  /**
+   * Specify the content `span` props
+   * @type {import('svelte/elements').HTMLDivAttributes}
+   */
+  export let contentProps = {};
 </script>
 
-<span class:bx--popover="{true}" {...$$restProps}>
-  <span class:bx--popover-content="{true}" class="{className}">
+<span class:bx--popover="{true}">
+  <span class:bx--popover-content="{true}" {...contentProps}>
     <slot />
   </span>
   <span class:bx--popover-caret="{true}"></span>
diff --git a/tests/Popover.test.svelte b/tests/Popover.test.svelte
index 34d5832da6..550c91e7d0 100644
--- a/tests/Popover.test.svelte
+++ b/tests/Popover.test.svelte
@@ -5,16 +5,15 @@
 </script>
 
 <Popover
-  bind:open
+  bind:open="{open}"
   closeOnOutsideClick
   align="right"
   caret
-  relative
   light
   highContrast
   on:click:outside="{() => {
     console.log('on:click:outside');
   }}"
 >
-  <PopoverContent style="padding: var(--bx-spacing-05)">Content</PopoverContent>
+  <PopoverContent>Content</PopoverContent>
 </Popover>