You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
It would be great if Zag.js could expose the index of the topmost dismissable layer via some global API. Right now, it is only available via (potentially expensive) DOM queries.
🧱 Problem Statement / Justification
We're trying to implement tooltip z-indexes in such a way that a tooltip overlays any existing dismissable layers upon being opened, but does not cover dismissable layers that are created while the tooltip is already shown (e.g., a dialog popping up). The issue we are trying to solve can be observed in this example where the dialog trigger's tooltip is displayed above the dialog while the tooltip animates out and the dialog animates in.
Having access to the index of the active dismissable layer when opening the tooltip would allow us to assign a z-index to the tooltip that is lower than the z-indexes we assign to subsequently opened dismissable layers.
✅ Proposed solution or API
A low-level solution might be exposing a function from @zag-js/dismissable that returns the size of the layer stack when called. If there is some interest in enhancing the available tooltip stacking approach in general, offering the layer index as an inline CSS custom property in the tooltip's positioner would feel like a cleaner alternative.
↩️ Alternatives
In our situation, we could also add custom layer tracking to our code base. That would add an unjustified amount of complexity to our components though, which we'd like to avoid if possible (knowing that Zag.js already holds the desired state internally).
This discussion was converted from issue #3249 on August 05, 2026 18:32.
Heading
Bold
Italic
Quote
Code
Link
Numbered list
Unordered list
Task list
Attach files
Mention
Reference
Menu
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
Uh oh!
There was an error while loading. Please reload this page.
🚀 Feature request
It would be great if Zag.js could expose the index of the topmost dismissable layer via some global API. Right now, it is only available via (potentially expensive) DOM queries.
🧱 Problem Statement / Justification
We're trying to implement tooltip
z-indexes in such a way that a tooltip overlays any existing dismissable layers upon being opened, but does not cover dismissable layers that are created while the tooltip is already shown (e.g., a dialog popping up). The issue we are trying to solve can be observed in this example where the dialog trigger's tooltip is displayed above the dialog while the tooltip animates out and the dialog animates in.Having access to the index of the active dismissable layer when opening the tooltip would allow us to assign a
z-indexto the tooltip that is lower than the z-indexes we assign to subsequently opened dismissable layers.✅ Proposed solution or API
A low-level solution might be exposing a function from
@zag-js/dismissablethat returns the size of the layer stack when called. If there is some interest in enhancing the available tooltip stacking approach in general, offering the layer index as an inline CSS custom property in the tooltip's positioner would feel like a cleaner alternative.↩️ Alternatives
In our situation, we could also add custom layer tracking to our code base. That would add an unjustified amount of complexity to our components though, which we'd like to avoid if possible (knowing that Zag.js already holds the desired state internally).
All reactions