Convert px values to rem on tooltip variables (#23468)

* converts px valures to rem on tooltip variables

* keep as px to match popover changes

diff --git a/scss/_tooltip.scss b/scss/_tooltip.scss
index 7b5db1cf2a5f2e97f5f1ca78bd593e028ab84ade..b03139c9117624b09e437b81290dc8e96bc064ab 100644 (file)
--- a/scss/_tooltip.scss
+++ b/scss/_tooltip.scss
@@ -34,7 +34,7 @@
     }
 
     .arrow::before {
-      margin-left: -($tooltip-arrow-width - 2);
+      margin-left: -$tooltip-arrow-width;
       content: "";
       border-width: $tooltip-arrow-width $tooltip-arrow-width 0;
       border-top-color: $tooltip-arrow-color;
@@ -47,7 +47,7 @@
     }
 
     .arrow::before {
-      margin-top: -($tooltip-arrow-width - 2);
+      margin-top: -$tooltip-arrow-width;
       content: "";
       border-width: $tooltip-arrow-width $tooltip-arrow-width $tooltip-arrow-width 0;
       border-right-color: $tooltip-arrow-color;
@@ -60,7 +60,7 @@
     }
 
     .arrow::before {
-      margin-left: -($tooltip-arrow-width - 2);
+      margin-left: -$tooltip-arrow-width;
       content: "";
       border-width: 0 $tooltip-arrow-width $tooltip-arrow-width;
       border-bottom-color: $tooltip-arrow-color;
@@ -74,7 +74,7 @@
 
     .arrow::before {
       right: 0;
-      margin-top: -($tooltip-arrow-width - 2);
+      margin-top: -($tooltip-arrow-width);
       content: "";
       border-width: $tooltip-arrow-width 0 $tooltip-arrow-width $tooltip-arrow-width;
       border-left-color: $tooltip-arrow-color;

diff --git a/scss/_variables.scss b/scss/_variables.scss
index 69cd5d34e76aed18580a37024c5cc1b88f7d2272..a1f31b9b03dc421276fc616640a0e7c04a1d506b 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -665,18 +665,17 @@ $card-columns-margin:               $card-spacer-y !default;
 
 // Tooltips
 
-$tooltip-max-width:                 200px !default;
-$tooltip-color:                     $white !default;
-$tooltip-bg:                        $black !default;
-$tooltip-opacity:                   .9 !default;
-$tooltip-padding-y:                 3px !default;
-$tooltip-padding-x:                 8px !default;
-$tooltip-margin:                    0 !default;
-
-
-$tooltip-arrow-width:               5px !default;
-$tooltip-arrow-height:              5px !default;
-$tooltip-arrow-color:               $tooltip-bg !default;
+$tooltip-max-width:           200px !default;
+$tooltip-color:               $white !default;
+$tooltip-bg:                  $black !default;
+$tooltip-opacity:             .9 !default;
+$tooltip-padding-y:           .25rem !default;
+$tooltip-padding-x:           .5rem !default;
+$tooltip-margin:              0 !default;
+
+$tooltip-arrow-width:         .4rem !default;
+$tooltip-arrow-height:        $tooltip-arrow-width !default;
+$tooltip-arrow-color:         $tooltip-bg !default;
 
 
 // Popovers