Convert tooltips to CSS vars

3 files changed, 70 insertions, 27 deletions

diff --git a/scss/_tooltip.scss b/scss/_tooltip.scss
index 2ee5847eac..80903f8a1f 100644
--- a/scss/_tooltip.scss
+++ b/scss/_tooltip.scss
@@ -1,24 +1,40 @@
 // Base class
 .tooltip {
+  // scss-docs-start tooltip-css-vars
+  --#{$variable-prefix}tooltip-zindex: #{$zindex-tooltip};
+  --#{$variable-prefix}tooltip-max-width: #{$tooltip-max-width};
+  --#{$variable-prefix}tooltip-padding-x: #{$tooltip-padding-x};
+  --#{$variable-prefix}tooltip-padding-y: #{$tooltip-padding-y};
+  --#{$variable-prefix}tooltip-margin: #{$tooltip-margin};
+  --#{$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;
+  z-index: var(--#{$variable-prefix}tooltip-zindex);
   display: block;
-  margin: $tooltip-margin;
+  margin: var(--#{$variable-prefix}tooltip-margin);
   // 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();
-  @include font-size($tooltip-font-size);
+  @include font-size(var(--#{$variable-prefix}tooltip-font-size));
   // Allow breaking very long words so they don't overflow the tooltip's bounds
   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,32 +46,32 @@
 }
 
 .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);
     }
   }
 }
 
 /* rtl:begin:ignore */
 .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);
     }
   }
 }
@@ -63,32 +79,32 @@
 /* rtl:end:ignore */
 
 .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);
     }
   }
 }
 
 /* rtl:begin:ignore */
 .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);
     }
   }
 }
@@ -112,10 +128,10 @@
 
 // Wrapper for the tooltip content
 .tooltip-inner {
-  max-width: $tooltip-max-width;
-  padding: $tooltip-padding-y $tooltip-padding-x;
-  color: $tooltip-color;
+  max-width: var(--#{$variable-prefix}tooltip-max-width);
+  padding: var(--#{$variable-prefix}tooltip-padding-y) var(--#{$variable-prefix}tooltip-padding-x);
+  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 1d860b2c2c..d29fefa7d6 100644
--- a/site/assets/scss/_component-examples.scss
+++ b/site/assets/scss/_component-examples.scss
@@ -239,6 +239,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 16501a3c96..1f1613fd03 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">