Tooltip appears above modal overlay

[nwhittaker]

Actual Behavior

If a tooltip is visible when a modal appears, the tooltip is layered above the modal's background overlay.

Expected Behavior

The tooltip is layered below the overlay.

Reproduction Sample

https://codepen.io/nwhittaker-esri/pen/eYryBbY

Reproduction Steps

1. Visit the sample
2. Hover the button until a tooltip appears
3. Click the button to open the modal

Reproduction Version

beta.94

Relevant Info

Field Maps has many icon-only buttons with tooltips (e.g. delete map, copy map, etc...) that launch modals.

Regression?

No response

Esri team

ArcGIS Field Apps

[jcfranco]

This is caused by our predefined z-index layer values where tooltip uses a popup z-index value of 999 and modal and its overlay use 700 and 800, respectively.

As a workaround, you could apply a z-index of 1000 to calcite-modal.

@macandcheese @ashetland @SkyeSeitz @driskull Do we to tweak the z-index used by tooltips (and other floating-ui components) to use the same as modal?

[driskull]

Do we to tweak the z-index used by tooltips (and other floating-ui components) to use the same as modal?

That might be the best thing to do. If a tooltip is inside a modal it should still appear above the modal right?

[ashetland]

That was going to be my question as well, can a tooltip be invoked inside a modal and how would the z-index affect that? One thing I noticed in the example was that I expected the Tooltip to dismiss as soon as the Modal opened. That might be another way to solve this, but I'm not sure about feasibility.

[macandcheese]

Do we to tweak the z-index used by tooltips (and other floating-ui components) to use the same as modal?

That might be the best thing to do. If a tooltip is inside a modal it should still appear above the modal right?

I'd agree yes

[driskull]

Making the tooltip/popover the same zIndex as the overlay doesn't seem to work because when you put a tooltip inside the modal it wont' display. This is because the modal is positioned fixed.

I think the best solution is to allow a user to set the zIndex of a component using a CSS variable for cases like this.

[github-actions]

Installed and assigned for verification.

[geospatialem]

Verified on next.669 where the tooltip, or popover, can have customized z-index'es using CSS vars --calcite-tooltip-z-index and --calcite-popover-z-index respectively.

For instance:

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