diff --git a/src/pages/_docs/popover.md b/src/pages/_docs/popover.md
index e6419d670..9f4394df2 100644
--- a/src/pages/_docs/popover.md
+++ b/src/pages/_docs/popover.md
@@ -11,25 +11,25 @@ menu: help.docs.components.popover
 To create a default popover use:
 
 {% capture code %}
-<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" 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" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
 {% endcapture %}
 {% include example.html code=code %}
 
 ## Four directions
 
-Four options are available: top, right, bottom, and left aligned. Directions are mirrored when using Bootstrap in RTL.
+Four options are available: `top`, `right`, `bottom`, and `left` aligned. Directions are mirrored when using Bootstrap in RTL.
 
 {% capture code %}
-<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Top popover">
+<button type="button" class="btn" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Top popover">
 Popover on top
 </button>
-<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Right popover">
+<button type="button" class="btn" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Right popover">
 Popover on right
 </button>
-<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Bottom popover">
+<button type="button" class="btn" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Bottom popover">
 Popover on bottom
 </button>
-<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Left popover">
+<button type="button" class="btn" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Left popover">
 Popover on left
 </button>
 {% endcapture %}
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
index 3495d4af4..bc5bb6928 100644
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@@ -639,7 +639,10 @@ $navbar-overlap-height: 9rem !default;
 $sidebar-width: 15rem !default;
 
 // Popover
+$popover-bg: var(--#{$prefix}bg-surface) !default;
+$popover-header-bg: transparent !default;
 $popover-border-color: var(--#{$prefix}border-color) !default;
+$popover-body-color: inherit !default;
 
 // Footer
 $footer-padding-y: 2rem !default;