diff --git a/scss/_popover.scss b/scss/_popover.scss
index 7b69f62328f2..fbb3103bcb3d 100644
--- a/scss/_popover.scss
+++ b/scss/_popover.scss
@@ -119,6 +119,12 @@
       top: var(--#{$prefix}popover-border-width);
       border-bottom-color: var(--#{$prefix}popover-bg);
     }
+
+    // `:has` is not yet supported by our `.browserlistrc` but since it adds an extra layer of specificity,
+    // it doesn't hurt the browsers that don't support it.
+    &:has(+ .popover-header)::after {
+      --#{$prefix}popover-bg: var(--#{$prefix}popover-header-bg);
+    }
   }
 
   // This will remove the popover-header's border just below the arrow
diff --git a/site/content/docs/5.3/components/popovers.md b/site/content/docs/5.3/components/popovers.md
index ae4237688b0e..47d03a330478 100644
--- a/site/content/docs/5.3/components/popovers.md
+++ b/site/content/docs/5.3/components/popovers.md
@@ -51,7 +51,7 @@ We use JavaScript similar to the snippet above to render the following live popo
 {{< /callout >}}
 
 {{< example stackblitz_add_js="true" >}}
-<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" data-bs-title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
+<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" data-bs-title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?" data-bs-placement="bottom">Click to toggle popover</button>
 {{< /example >}}
 
 ### Four directions