fix(tooltip): Prevent tooltip from appearing above modal overlay. #5388

src/assets/styles/_floating-ui.scss

@@ -2,10 +2,10 @@ $floating-ui-transform-bottom: translateY(-5px);
 $floating-ui-transform-top: translateY(5px);
 $floating-ui-transform-left: translateX(5px);
 $floating-ui-transform-right: translateX(-5px);
-$floating-ui-default-z-index: 900;
 
 :root {
   --calcite-floating-ui-transition: var(--calcite-animation-timing);
+  --calcite-floating-ui-z-index: theme("zIndex.popover");
 }
 
 @mixin floatingUIAnim {
@@ -74,10 +74,10 @@ $floating-ui-default-z-index: 900;
   }
 }
 
-@mixin floatingUIContainer($zIndex: $floating-ui-default-z-index) {
+@mixin floatingUIContainer() {
   display: block;
   position: absolute;
-  z-index: $zIndex;
+  z-index: var(--calcite-floating-ui-z-index);
 }
 
 @mixin floatingUIWrapper {
@@ -88,9 +88,9 @@ $floating-ui-default-z-index: 900;
   visibility: visible;
 }
 
-@mixin floatingUIHost($zIndex: $floating-ui-default-z-index) {
+@mixin floatingUIHost() {
   :host {
-    @include floatingUIContainer($zIndex);
+    @include floatingUIContainer();
   }
 
   @include floatingUIHostAnim();

src/components/combobox/combobox.scss

@@ -143,6 +143,7 @@
 }
 
 .floating-ui-container {
+  --calcite-floating-ui-z-index: theme("zIndex.dropdown");
   @include floatingUIContainer();
   @include floatingUIWrapper();
 }

src/components/dropdown/dropdown.scss

@@ -13,6 +13,7 @@
 @include disabled();
 
 :host .calcite-dropdown-wrapper {
+  --calcite-floating-ui-z-index: theme("zIndex.dropdown");
   @include floatingUIContainer();
   @include floatingUIWrapper();
 }

src/components/input-date-picker/input-date-picker.scss

@@ -89,6 +89,7 @@
 }
 
 .menu-container {
+  --calcite-floating-ui-z-index: theme("zIndex.dropdown");
   @include floatingUIContainer();
   @include floatingUIWrapper();
   @apply invisible;

src/components/popover/popover.e2e.ts

@@ -13,7 +13,7 @@ describe("calcite-popover", () => {
     );
   });
 
-  it("should have zIndex of 900", async () => {
+  it("should have zIndex of 700", async () => {
     const page = await newE2EPage();
 
     await page.setContent(
@@ -28,7 +28,7 @@ describe("calcite-popover", () => {
 
     const style = await popover.getComputedStyle();
 
-    expect(style.zIndex).toBe("900");
+    expect(style.zIndex).toBe("700");
   });
 
   it("is accessible when closed", async () =>

src/components/popover/popover.scss

@@ -1,3 +1,7 @@
+:host {
+  --calcite-floating-ui-z-index: theme("zIndex.popover");
+}
+
 @include floatingUIHost();
 @include floatingUIArrow();
 

src/components/tooltip/tooltip.e2e.ts

@@ -47,7 +47,7 @@ describe("calcite-tooltip", () => {
       }
     ]));
 
-  it("should have zIndex of 999", async () => {
+  it("should have zIndex of 701", async () => {
     const page = await newE2EPage();
 
     await page.setContent(
@@ -62,7 +62,7 @@ describe("calcite-tooltip", () => {
 
     const style = await tooltip.getComputedStyle();
 
-    expect(style.zIndex).toBe("999");
+    expect(style.zIndex).toBe("701");
   });
 
   it("tooltip positions when referenceElement is set", async () => {

src/components/tooltip/tooltip.scss

@@ -1,4 +1,8 @@
-@include floatingUIHost(999);
+:host {
+  --calcite-floating-ui-z-index: theme("zIndex.tooltip");
+}
+
+@include floatingUIHost();
 @include floatingUIArrow();
 
 .container {

tailwind.config.ts

@@ -216,9 +216,10 @@ export default {
         header: "400",
         toast: "500",
         dropdown: "600",
-        overlay: "700",
-        modal: "800",
-        popup: "900"
+        popover: "700",
+        tooltip: "701",
+        overlay: "800",
+        modal: "900"
       }
     }
   },