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

* converts px valures to rem on tooltip variables

* keep as px to match popover changes

Author: andresgalante

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;

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