diff --git a/theme/boost/scss/moodle/bootstrap-rtl.scss b/theme/boost/scss/moodle/bootstrap-rtl.scss
index ede468e9c7a..f6a99006a33 100644
--- a/theme/boost/scss/moodle/bootstrap-rtl.scss
+++ b/theme/boost/scss/moodle/bootstrap-rtl.scss
@@ -40,4 +40,25 @@
             right: auto;
         }
     }
+
+    .popover {
+        &.bs-popover-right,
+        &.bs-popover-auto[x-placement^="right"] {
+            margin-right: 0;
+            margin-left: $popover-arrow-height;
+            .arrow {
+                transform: rotate(180deg);
+                left: subtract(-$popover-arrow-height, $popover-border-width);
+            }
+        }
+        &.bs-popover-left,
+        &.bs-popover-auto[x-placement^="left"] {
+            margin-right: $popover-arrow-height;
+            margin-left: 0;
+            .arrow {
+                transform: rotate(180deg);
+                right: subtract(-$popover-arrow-height, $popover-border-width);
+            }
+        }
+    }
 }
diff --git a/theme/boost/scss/moodle/tool_usertours.scss b/theme/boost/scss/moodle/tool_usertours.scss
index 79dee6c54fc..d7e67f3404d 100644
--- a/theme/boost/scss/moodle/tool_usertours.scss
+++ b/theme/boost/scss/moodle/tool_usertours.scss
@@ -103,6 +103,26 @@ span[data-flexitour="container"] {
             }
         }
     }
+
+    // RTL specific styles.
+    .dir-rtl & {
+        &[x-placement^="right"] {
+            margin-left: $popover-arrow-width;
+            div[data-role="arrow"] {
+                transform: rotate(180deg);
+                left: -$popover-arrow-width;
+                right: auto;
+            }
+        }
+        &[x-placement^="left"] {
+            margin-right: $popover-arrow-width;
+            div[data-role="arrow"] {
+                transform: rotate(180deg);
+                left: auto;
+                right: -$popover-arrow-width;
+            }
+        }
+    }
 }
 
 // Hack the bone! Hack the bone!
diff --git a/theme/boost/scss/moodle/undo.scss b/theme/boost/scss/moodle/undo.scss
index c9c41a6d77f..a6bfa397435 100644
--- a/theme/boost/scss/moodle/undo.scss
+++ b/theme/boost/scss/moodle/undo.scss
@@ -139,29 +139,6 @@ body:not(.jsenabled) .langmenu:hover > .dropdown-menu,
         }
     }
 }
-/* Force positioning of popover arrows.
- *
- * The Css prefixer used in Moodle does not support complex calc statements used
- * in Bootstrap 4 CSS. For example:
- * calc((0.5rem + 1px) * -1); is stripped out by lib/php-css-parser/Parser.php.
- * See MDL-61879. For now the arrow positions of popovers are fixed until this is resolved.
- */
-.bs-popover-right .arrow,
-.bs-popover-auto[x-placement^="right"] .arrow {
-    left: -9px;
-}
-.bs-popover-left .arrow,
-.bs-popover-auto[x-placement^="left"] .arrow {
-    right: -9px;
-}
-.bs-popover-top .arrow,
-.bs-popover-auto[x-placement^="top"] .arrow {
-    bottom: -9px;
-}
-.bs-popover-bottom .arrow,
-.bs-popover-auto[x-placement^="bottom"] .arrow {
-    top: -9px;
-}
 
 // Fixes an issue on Safari when the .custom-select is inside a .card class.
 .custom-select {
diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
index 0bbe8acb402..b8d19d8a014 100644
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -12727,6 +12727,22 @@ a.text-dark:hover, a.text-dark:focus {
   left: 0;
   right: auto;
 }
+.dir-rtl .popover.bs-popover-right, .dir-rtl .popover.bs-popover-auto[x-placement^=right] {
+  margin-right: 0;
+  margin-left: 0.5rem;
+}
+.dir-rtl .popover.bs-popover-right .arrow, .dir-rtl .popover.bs-popover-auto[x-placement^=right] .arrow {
+  transform: rotate(180deg);
+  left: calc(-0.5rem - 1px);
+}
+.dir-rtl .popover.bs-popover-left, .dir-rtl .popover.bs-popover-auto[x-placement^=left] {
+  margin-right: 0.5rem;
+  margin-left: 0;
+}
+.dir-rtl .popover.bs-popover-left .arrow, .dir-rtl .popover.bs-popover-auto[x-placement^=left] .arrow {
+  transform: rotate(180deg);
+  right: calc(-0.5rem - 1px);
+}
 
 /**
  * Moodle variables
@@ -24952,33 +24968,6 @@ body:not(.jsenabled) .langmenu:hover > .dropdown-menu,
   z-index: inherit;
 }
 
-/* Force positioning of popover arrows.
- *
- * The Css prefixer used in Moodle does not support complex calc statements used
- * in Bootstrap 4 CSS. For example:
- * calc((0.5rem + 1px) * -1); is stripped out by lib/php-css-parser/Parser.php.
- * See MDL-61879. For now the arrow positions of popovers are fixed until this is resolved.
- */
-.bs-popover-right .arrow,
-.bs-popover-auto[x-placement^=right] .arrow {
-  left: -9px;
-}
-
-.bs-popover-left .arrow,
-.bs-popover-auto[x-placement^=left] .arrow {
-  right: -9px;
-}
-
-.bs-popover-top .arrow,
-.bs-popover-auto[x-placement^=top] .arrow {
-  bottom: -9px;
-}
-
-.bs-popover-bottom .arrow,
-.bs-popover-auto[x-placement^=bottom] .arrow {
-  top: -9px;
-}
-
 .custom-select {
   word-wrap: normal;
 }
@@ -25700,6 +25689,22 @@ span[data-flexitour=container][x-placement=right] div[data-role=arrow]:after, sp
   border-left-width: 0;
   border-right-color: #fff;
 }
+.dir-rtl span[data-flexitour=container][x-placement^=right] {
+  margin-left: 1rem;
+}
+.dir-rtl span[data-flexitour=container][x-placement^=right] div[data-role=arrow] {
+  transform: rotate(180deg);
+  left: -1rem;
+  right: auto;
+}
+.dir-rtl span[data-flexitour=container][x-placement^=left] {
+  margin-right: 1rem;
+}
+.dir-rtl span[data-flexitour=container][x-placement^=left] div[data-role=arrow] {
+  transform: rotate(180deg);
+  left: auto;
+  right: -1rem;
+}
 
 [data-region=drawer] [data-flexitour=container] {
   /*rtl:ignore*/
diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css
index ee75aabc436..18a7eb4d27f 100644
--- a/theme/classic/style/moodle.css
+++ b/theme/classic/style/moodle.css
@@ -12727,6 +12727,22 @@ a.text-dark:hover, a.text-dark:focus {
   left: 0;
   right: auto;
 }
+.dir-rtl .popover.bs-popover-right, .dir-rtl .popover.bs-popover-auto[x-placement^=right] {
+  margin-right: 0;
+  margin-left: 0.5rem;
+}
+.dir-rtl .popover.bs-popover-right .arrow, .dir-rtl .popover.bs-popover-auto[x-placement^=right] .arrow {
+  transform: rotate(180deg);
+  left: calc(-0.5rem - 1px);
+}
+.dir-rtl .popover.bs-popover-left, .dir-rtl .popover.bs-popover-auto[x-placement^=left] {
+  margin-right: 0.5rem;
+  margin-left: 0;
+}
+.dir-rtl .popover.bs-popover-left .arrow, .dir-rtl .popover.bs-popover-auto[x-placement^=left] .arrow {
+  transform: rotate(180deg);
+  right: calc(-0.5rem - 1px);
+}
 
 /**
  * Moodle variables
@@ -24952,33 +24968,6 @@ body:not(.jsenabled) .langmenu:hover > .dropdown-menu,
   z-index: inherit;
 }
 
-/* Force positioning of popover arrows.
- *
- * The Css prefixer used in Moodle does not support complex calc statements used
- * in Bootstrap 4 CSS. For example:
- * calc((0.5rem + 1px) * -1); is stripped out by lib/php-css-parser/Parser.php.
- * See MDL-61879. For now the arrow positions of popovers are fixed until this is resolved.
- */
-.bs-popover-right .arrow,
-.bs-popover-auto[x-placement^=right] .arrow {
-  left: -9px;
-}
-
-.bs-popover-left .arrow,
-.bs-popover-auto[x-placement^=left] .arrow {
-  right: -9px;
-}
-
-.bs-popover-top .arrow,
-.bs-popover-auto[x-placement^=top] .arrow {
-  bottom: -9px;
-}
-
-.bs-popover-bottom .arrow,
-.bs-popover-auto[x-placement^=bottom] .arrow {
-  top: -9px;
-}
-
 .custom-select {
   word-wrap: normal;
 }
@@ -25634,6 +25623,22 @@ span[data-flexitour=container][x-placement=right] div[data-role=arrow]:after, sp
   border-left-width: 0;
   border-right-color: #fff;
 }
+.dir-rtl span[data-flexitour=container][x-placement^=right] {
+  margin-left: 1rem;
+}
+.dir-rtl span[data-flexitour=container][x-placement^=right] div[data-role=arrow] {
+  transform: rotate(180deg);
+  left: -1rem;
+  right: auto;
+}
+.dir-rtl span[data-flexitour=container][x-placement^=left] {
+  margin-right: 1rem;
+}
+.dir-rtl span[data-flexitour=container][x-placement^=left] div[data-role=arrow] {
+  transform: rotate(180deg);
+  left: auto;
+  right: -1rem;
+}
 
 [data-region=drawer] [data-flexitour=container] {
   /*rtl:ignore*/