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

**Related Issue:** #5388

## Summary

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

- Updates floating-ui to use tailwind configuration
- Sets default z-index to be that of a dropdown
- Adds ability for users to customize zindex of tooltips and popovers
  - CSS vars `--calcite-tooltip-z-index` and `--calcite-popover-z-index`

```html
 <calcite-tooltip style="--calcite-tooltip-z-index: 500;" label="Open modal" reference-element="button">
Open modal
</calcite-tooltip>
```

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.dropdown");
 }
 
 @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/modal/modal.stories.ts

@@ -68,3 +68,24 @@ export const darkThemeRTLCustomSize_TestOnly = (): string => html`
 `;
 
 darkThemeRTLCustomSize_TestOnly.parameters = { themes: themesDarkDefault };
+
+export const withTooltips_TestOnly = (): string => html`
+  <button id="button">Open</button>
+  <calcite-tooltip style="--calcite-tooltip-z-index: 600;" open label="Open modal" reference-element="button"
+    >Open modal</calcite-tooltip
+  >
+  <calcite-modal open aria-labelledby="modal-title" id="modal">
+    <div slot="header" id="modal-title">Modal title</div>
+    <div slot="content">
+      Modal content lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+      et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+      commodo consequat.
+    </div>
+    <calcite-button id="back-button-modal" slot="back" color="neutral" icon="chevron-left" width="full"
+      >Back
+    </calcite-button>
+    <calcite-button slot="secondary" width="full" appearance="outline">Cancel</calcite-button>
+    <calcite-button slot="primary" width="full">Save</calcite-button>
+  </calcite-modal>
+  <calcite-tooltip open label="Back" reference-element="back-button-modal">Back</calcite-tooltip>
+`;

src/components/popover/popover.scss

@@ -1,3 +1,15 @@
+/**
+ * CSS Custom Properties
+ *
+ * These properties can be overridden using the component's tag as selector.
+ *
+ * @prop --calcite-popover-z-index: Sets the z-index value for the component.
+ */
+
+:host {
+  --calcite-floating-ui-z-index: var(--calcite-popover-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 901", 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("901");
   });
 
   it("tooltip positions when referenceElement is set", async () => {

src/components/tooltip/tooltip.scss

@@ -1,4 +1,16 @@
-@include floatingUIHost(999);
+/**
+ * CSS Custom Properties
+ *
+ * These properties can be overridden using the component's tag as selector.
+ *
+ * @prop --calcite-tooltip-z-index: Sets the z-index value for the component.
+ */
+
+:host {
+  --calcite-floating-ui-z-index: var(--calcite-tooltip-z-index, theme("zIndex.tooltip"));
+}
+
+@include floatingUIHost();
 @include floatingUIArrow();
 
 .container {

tailwind.config.ts

@@ -218,7 +218,8 @@ export default {
         dropdown: "600",
         overlay: "700",
         modal: "800",
-        popup: "900"
+        popover: "900",
+        tooltip: "901"
       }
     }
   },