diff --git a/src/bundle/Resources/public/scss/_custom.tooltip.scss b/src/bundle/Resources/public/scss/_custom.tooltip.scss
index 2eae1a9017..9b5ac3de7d 100644
--- a/src/bundle/Resources/public/scss/_custom.tooltip.scss
+++ b/src/bundle/Resources/public/scss/_custom.tooltip.scss
@@ -62,99 +62,22 @@
         box-shadow: 0 calculateRem(4px) calculateRem(6px) rgba(135, 135, 135, 0.35);
     }
 
-    &--ground-dark {
-        .ibexa-tooltip {
-            &__inner {
-                color: $ibexa-color-white;
-                background-color: $ibexa-color-complementary-strong;
-            }
-        }
-
-        &.ibexa-tooltip {
-            &.bs-tooltip-top,
-            &[data-popper-placement='top'] {
-                .ibexa-tooltip__arrow {
-                    &::before {
-                        border-top-color: $ibexa-color-complementary-strong;
-                    }
-                }
-            }
-
-            &.bs-tooltip-end,
-            &[data-popper-placement='right'] {
-                .ibexa-tooltip__arrow {
-                    &::before {
-                        border-right-color: $ibexa-color-complementary-strong;
-                    }
-                }
-            }
-
-            &.bs-tooltip-bottom,
-            &[data-popper-placement='bottom'] {
-                .ibexa-tooltip__arrow {
-                    &::before {
-                        border-bottom-color: $ibexa-color-complementary-strong;
-                    }
-                }
-            }
+    &--dark {
+        @include tooltip-variant($ibexa-color-white, $ibexa-color-dark);
+    }
 
-            &.bs-tooltip-start,
-            &[data-popper-placement='left'] {
-                .ibexa-tooltip__arrow {
-                    &::before {
-                        border-left-color: $ibexa-color-complementary-strong;
-                    }
-                }
-            }
-        }
+    &--ground-dark {
+        @include tooltip-variant($ibexa-color-white, $ibexa-color-complementary-strong);
     }
 
     &--navigation {
+        @include tooltip-variant($ibexa-color-dark, $ibexa-color-complementary-primary-400);
+
         .ibexa-tooltip {
             &__inner {
-                color: $ibexa-color-dark;
-                background-color: $ibexa-color-complementary-primary-400;
                 border-color: transparent;
                 box-shadow: 0 calculateRem(2px) calculateRem(8px) rgba($ibexa-color-dark, 0.15);
             }
         }
-
-        &.ibexa-tooltip {
-            &.bs-tooltip-top,
-            &[data-popper-placement='top'] {
-                .ibexa-tooltip__arrow {
-                    &::before {
-                        border-top-color: $ibexa-color-complementary-primary-400;
-                    }
-                }
-            }
-
-            &.bs-tooltip-end,
-            &[data-popper-placement='right'] {
-                .ibexa-tooltip__arrow {
-                    &::before {
-                        border-right-color: $ibexa-color-complementary-primary-400;
-                    }
-                }
-            }
-
-            &.bs-tooltip-bottom,
-            &[data-popper-placement='bottom'] {
-                .ibexa-tooltip__arrow {
-                    &::before {
-                        border-bottom-color: $ibexa-color-complementary-primary-400;
-                    }
-                }
-            }
-
-            &.bs-tooltip-start,
-            &[data-popper-placement='left'] {
-                .ibexa-tooltip__arrow {
-                    &::before {
-                        border-left-color: $ibexa-color-complementary-primary-400;
-                    }
-                }
-            }
-        }
     }
 }
diff --git a/src/bundle/Resources/public/scss/_mixins.scss b/src/bundle/Resources/public/scss/_mixins.scss
index b0f5406ff2..4709e7d4bb 100644
--- a/src/bundle/Resources/public/scss/_mixins.scss
+++ b/src/bundle/Resources/public/scss/_mixins.scss
@@ -13,6 +13,7 @@
 @import 'mixins/drag-and-drop';
 @import 'mixins/spinner';
 @import 'mixins/tab-selector';
+@import 'mixins/tooltips';
 
 @mixin datetime-field() {
     &.is-invalid {
diff --git a/src/bundle/Resources/public/scss/mixins/_tooltips.scss b/src/bundle/Resources/public/scss/mixins/_tooltips.scss
new file mode 100644
index 0000000000..9b8f8947bd
--- /dev/null
+++ b/src/bundle/Resources/public/scss/mixins/_tooltips.scss
@@ -0,0 +1,47 @@
+@mixin tooltip-variant($color, $background-color) {
+    .ibexa-tooltip {
+        &__inner {
+            color: $color;
+            background-color: $background-color;
+            border-color: $ibexa-color-dark;
+        }
+    }
+
+    &.ibexa-tooltip {
+        &.bs-tooltip-top,
+        &[data-popper-placement='top'] {
+            .ibexa-tooltip__arrow {
+                &::before {
+                    border-top-color: $background-color;
+                }
+            }
+        }
+
+        &.bs-tooltip-end,
+        &[data-popper-placement='right'] {
+            .ibexa-tooltip__arrow {
+                &::before {
+                    border-right-color: $background-color;
+                }
+            }
+        }
+
+        &.bs-tooltip-bottom,
+        &[data-popper-placement='bottom'] {
+            .ibexa-tooltip__arrow {
+                &::before {
+                    border-bottom-color: $background-color;
+                }
+            }
+        }
+
+        &.bs-tooltip-start,
+        &[data-popper-placement='left'] {
+            .ibexa-tooltip__arrow {
+                &::before {
+                    border-left-color: $background-color;
+                }
+            }
+        }
+    }
+}