feat(tooltip): Defining a z-index mixin.

PiperOrigin-RevId: 329752979

packages/mdc-tooltip/README.md

@@ -159,6 +159,7 @@ Mixin | Description
 `label-ink-color($color)` | Sets the color of the tooltip's label text.
 `shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to tooltip surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.
 `word-break($value, $fallbackValue)` | Sets the `word-break` property for the tooltip label. This is used to force-wrap long tooltip labels that lack spaces and hyphens. The optional $fallbackValue param can be used for IE11 as it does not support the `break-word` option. Users for IE11 who do not want their tooltip labels to be broken in the middle of the word can use this mixin to remove the default IE11 behavior of `break-all`.
+`z-index($z-index)` | Sets the z-index of the tooltip.
 
 ### `MDCTooltip` Methods
 

packages/mdc-tooltip/_tooltip-theme.scss

@@ -41,13 +41,14 @@ $word-break-custom-prop: custom-properties.create(
 );
 $word-break-default: custom-properties.create-var($word-break-custom-prop);
 $word-break-ie11-fallback: break-all;
+$z-index: 2;
 
-/// Sets the border-radius for the tooltip element.
-/// @param {Number | String} $radius Desired border radius value, accepts either
-///   a shape category or number value. $radius can be a singel value, or a
-///   list of up to 4 values.
-/// @param {Boolean} $rtl-reflexive [false] If a rule should be created for a
-///    flipped $radius for a RTL layout.
+// Sets the border-radius for the tooltip element.
+// @param {Number | String} $radius Desired border radius value, accepts either
+//   a shape category or number value. $radius can be a singel value, or a
+//   list of up to 4 values.
+// @param {Boolean} $rtl-reflexive [false] If a rule should be created for a
+//    flipped $radius for a RTL layout.
 @mixin shape-radius(
   $radius,
   $rtl-reflexive: false,
@@ -84,8 +85,8 @@ $word-break-ie11-fallback: break-all;
   }
 }
 
-/// Sets the color of the tooltip label.
-/// @param {Color | String} $color
+// Sets the color of the tooltip label.
+// @param {Color | String} $color
 @mixin label-ink-color($color, $query: feature-targeting.all()) {
   $feat-color: feature-targeting.create-target($query, color);
   @include feature-targeting.targets($feat-color) {
@@ -95,8 +96,8 @@ $word-break-ie11-fallback: break-all;
   }
 }
 
-/// Sets the fill/surface color of the tooltip.
-/// @param {Color | String} $color
+// Sets the fill/surface color of the tooltip.
+// @param {Color | String} $color
 @mixin fill-color($color, $query: feature-targeting.all()) {
   $feat-color: feature-targeting.create-target($query, color);
   .mdc-tooltip__surface {
@@ -105,3 +106,15 @@ $word-break-ie11-fallback: break-all;
     }
   }
 }
+
+// Sets the z-index of the tooltip.
+// @param {Number} $z-index
+@mixin z-index($z-index, $query: feature-targeting.all()) {
+  $feat-structure: feature-targeting.create-target($query, structure);
+
+  @include feature-targeting.targets($feat-structure) {
+    .mdc-tooltip {
+      z-index: $z-index;
+    }
+  }
+}

packages/mdc-tooltip/_tooltip.scss

@@ -39,7 +39,6 @@ $_min-height: 24px;
 // LINT.ThenChange(constants.ts:tooltip-dimensions)
 $_label-type-scale: caption;
 $_line-height: 16px;
-$_z-index: 2;
 
 $enter-duration: 150ms;
 $exit-duration: 75ms;
@@ -65,12 +64,12 @@ $exit-duration: 75ms;
     tooltip-theme.$word-break-ie11-fallback,
     $query: $query
   );
+  @include tooltip-theme.z-index(tooltip-theme.$z-index, $query: $query);
 
   .mdc-tooltip {
     @include feature-targeting.targets($feat-structure) {
       position: fixed;
       display: none;
-      z-index: $_z-index;
     }
   }