diff --git a/scss/_popover.scss b/scss/_popover.scss
index 3e4164398f..779b58082e 100644
--- a/scss/_popover.scss
+++ b/scss/_popover.scss
@@ -8,7 +8,7 @@
   // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
   // So reset our font and text properties to avoid inheriting weird values.
   @include reset-text();
-  font-size: $font-size-sm;
+  font-size: $popover-font-size;
   // Allow breaking very long words so they don't overflow the popover's bounds
   word-wrap: break-word;
   background-color: $popover-bg;
diff --git a/scss/_tooltip.scss b/scss/_tooltip.scss
index a03de57425..7f6a26f75a 100644
--- a/scss/_tooltip.scss
+++ b/scss/_tooltip.scss
@@ -7,7 +7,7 @@
   // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
   // So reset our font and text properties to avoid inheriting weird values.
   @include reset-text();
-  font-size: $font-size-sm;
+  font-size: $tooltip-font-size;
   // Allow breaking very long words so they don't overflow the tooltip's bounds
   word-wrap: break-word;
   opacity: 0;
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 1c6ca3abb5..afd05e4320 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -667,6 +667,7 @@ $card-columns-margin:               $card-spacer-y !default;
 
 // Tooltips
 
+$tooltip-font-size:           $font-size-sm !default;
 $tooltip-max-width:           200px !default;
 $tooltip-color:               $white !default;
 $tooltip-bg:                  $black !default;
@@ -682,6 +683,7 @@ $tooltip-arrow-color:         $tooltip-bg !default;
 
 // Popovers
 
+$popover-font-size:                 $font-size-sm !default;
 $popover-bg:                        $white !default;
 $popover-max-width:                 276px !default;
 $popover-border-width:              $border-width !default;