Convert tooltips to CSS vars

put the border-radius var to use

Simplify custom tooltips

3 files changed, 61 insertions, 23 deletions

diff --git a/scss/_tooltip.scss b/scss/_tooltip.scss
index 75ff07838..d2b64a72a 100644
--- a/scss/_tooltip.scss
+++ b/scss/_tooltip.scss
@@ -1,5 +1,16 @@
 // Base class
 .tooltip {
+  --#{$variable-prefix}tooltip-padding: #{$tooltip-padding-y} #{$tooltip-padding-x};
+  --#{$variable-prefix}tooltip-font-size: #{$tooltip-font-size};
+  --#{$variable-prefix}tooltip-color: #{$tooltip-color};
+  --#{$variable-prefix}tooltip-bg: #{$tooltip-bg};
+  --#{$variable-prefix}tooltip-border-radius: #{$tooltip-border-radius};
+  --#{$variable-prefix}tooltip-opacity: #{$tooltip-opacity};
+  --#{$variable-prefix}tooltip-arrow-width: #{$tooltip-arrow-width};
+  --#{$variable-prefix}tooltip-arrow-height: #{$tooltip-arrow-height};
+
+  $tooltip-arrow-color: null;
+
   position: absolute;
   z-index: $zindex-tooltip;
   display: block;
@@ -12,13 +23,13 @@
   word-wrap: break-word;
   opacity: 0;
 
-  &.show { opacity: $tooltip-opacity; }
+  &.show { opacity: var(--#{$variable-prefix}tooltip-opacity); }
 
   .tooltip-arrow {
     position: absolute;
     display: block;
-    width: $tooltip-arrow-width;
-    height: $tooltip-arrow-height;
+    width: var(--#{$variable-prefix}tooltip-arrow-width);
+    height: var(--#{$variable-prefix}tooltip-arrow-height);
 
     &::before {
       position: absolute;
@@ -30,61 +41,61 @@
 }
 
 .bs-tooltip-top {
-  padding: $tooltip-arrow-height 0;
+  padding: var(--#{$variable-prefix}tooltip-arrow-height) 0;
 
   .tooltip-arrow {
     bottom: 0;
 
     &::before {
       top: -1px;
-      border-width: $tooltip-arrow-height ($tooltip-arrow-width * .5) 0;
-      border-top-color: $tooltip-arrow-color;
+      border-width: var(--#{$variable-prefix}tooltip-arrow-height) calc(var(--#{$variable-prefix}tooltip-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list
+      border-top-color: var(--#{$variable-prefix}tooltip-bg);
     }
   }
 }
 
 .bs-tooltip-end {
-  padding: 0 $tooltip-arrow-height;
+  padding: 0 var(--#{$variable-prefix}tooltip-arrow-height);
 
   .tooltip-arrow {
     left: 0;
-    width: $tooltip-arrow-height;
-    height: $tooltip-arrow-width;
+    width: var(--#{$variable-prefix}tooltip-arrow-height);
+    height: var(--#{$variable-prefix}tooltip-arrow-width);
 
     &::before {
       right: -1px;
-      border-width: ($tooltip-arrow-width * .5) $tooltip-arrow-height ($tooltip-arrow-width * .5) 0;
-      border-right-color: $tooltip-arrow-color;
+      border-width: calc(var(--#{$variable-prefix}tooltip-arrow-width) * .5) var(--#{$variable-prefix}tooltip-arrow-height) calc(var(--#{$variable-prefix}tooltip-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list
+      border-right-color: var(--#{$variable-prefix}tooltip-bg);
     }
   }
 }
 
 .bs-tooltip-bottom {
-  padding: $tooltip-arrow-height 0;
+  padding: var(--#{$variable-prefix}tooltip-arrow-height) 0;
 
   .tooltip-arrow {
     top: 0;
 
     &::before {
       bottom: -1px;
-      border-width: 0 ($tooltip-arrow-width * .5) $tooltip-arrow-height;
-      border-bottom-color: $tooltip-arrow-color;
+      border-width: 0 calc(var(--#{$variable-prefix}tooltip-arrow-width) * .5) var(--#{$variable-prefix}tooltip-arrow-height); // stylelint-disable-line function-disallowed-list
+      border-bottom-color: var(--#{$variable-prefix}tooltip-bg);
     }
   }
 }
 
 .bs-tooltip-start {
-  padding: 0 $tooltip-arrow-height;
+  padding: 0 var(--#{$variable-prefix}tooltip-arrow-height);
 
   .tooltip-arrow {
     right: 0;
-    width: $tooltip-arrow-height;
-    height: $tooltip-arrow-width;
+    width: var(--#{$variable-prefix}tooltip-arrow-height);
+    height: var(--#{$variable-prefix}tooltip-arrow-width);
 
     &::before {
       left: -1px;
-      border-width: ($tooltip-arrow-width * .5) 0 ($tooltip-arrow-width * .5) $tooltip-arrow-height;
-      border-left-color: $tooltip-arrow-color;
+      border-width: calc(var(--#{$variable-prefix}tooltip-arrow-width) * .5) 0 calc(var(--#{$variable-prefix}tooltip-arrow-width) * .5) var(--#{$variable-prefix}tooltip-arrow-height); // stylelint-disable-line function-disallowed-list
+      border-left-color: var(--#{$variable-prefix}tooltip-bg);
     }
   }
 }
@@ -107,9 +118,9 @@
 // Wrapper for the tooltip content
 .tooltip-inner {
   max-width: $tooltip-max-width;
-  padding: $tooltip-padding-y $tooltip-padding-x;
-  color: $tooltip-color;
+  padding: var(--#{$variable-prefix}tooltip-padding);
+  color: var(--#{$variable-prefix}tooltip-color);
   text-align: center;
-  background-color: $tooltip-bg;
-  @include border-radius($tooltip-border-radius);
+  background-color: var(--#{$variable-prefix}tooltip-bg);
+  border-radius: var(--#{$variable-prefix}tooltip-border-radius, 0); // stylelint-disable-line property-disallowed-list
 }
diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss
index f93f1ee98..f0fc4d7f7 100644
--- a/site/assets/scss/_component-examples.scss
+++ b/site/assets/scss/_component-examples.scss
@@ -233,6 +233,10 @@
   white-space: nowrap;
 }
 
+.custom-tooltip {
+  --bs-tooltip-bg: var(--bs-primary);
+}
+
 // Scrollspy demo on fixed height div
 .scrollspy-example {
   position: relative;
diff --git a/site/content/docs/5.1/components/tooltips.md b/site/content/docs/5.1/components/tooltips.md
index 58da2076b..246747251 100644
--- a/site/content/docs/5.1/components/tooltips.md
+++ b/site/content/docs/5.1/components/tooltips.md
@@ -50,6 +50,29 @@ Hover over the links below to see tooltips:
   </p>
 </div>
 
+### Custom tooltips
+
+<small class="d-inline-flex px-2 py-1 font-monospace text-muted border rounded-3">Added in v5.2.0</small>
+
+You can customize the appearance of tooltips using [CSS variables](#variables). We set a custom class with `data-bs-custom-class="custom-tooltip"` to scope our custom appearance and use it to override a local CSS variable.
+
+```scss
+.custom-tooltip {
+  --bs-tooltip-bg: var(--bs-primary);
+}
+```
+
+{{< example class="tooltip-demo" >}}
+<button type="button" class="btn btn-secondary"
+        data-bs-toggle="tooltip" data-bs-placement="top"
+        data-bs-custom-class="custom-tooltip"
+        title="This top tooltip is themed via CSS variables.">
+  Custom tooltip
+</button>
+{{< /example >}}
+
+### Directions
+
 Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left. Directions are mirrored when using Bootstrap in RTL.
 
 <div class="bd-example tooltip-demo">