diff options
| -rw-r--r-- | packages/astro/src/runtime/client/dev-overlay/plugins/utils/highlight.ts | 4 | ||||
| -rw-r--r-- | packages/astro/src/runtime/client/dev-overlay/plugins/xray.ts | 2 |
2 files changed, 5 insertions, 1 deletions
diff --git a/packages/astro/src/runtime/client/dev-overlay/plugins/utils/highlight.ts b/packages/astro/src/runtime/client/dev-overlay/plugins/utils/highlight.ts index 9dad2b0f5..73d7fe112 100644 --- a/packages/astro/src/runtime/client/dev-overlay/plugins/utils/highlight.ts +++ b/packages/astro/src/runtime/client/dev-overlay/plugins/utils/highlight.ts @@ -57,9 +57,12 @@ export function attachTooltipToHighlight( originalElement: Element ) { highlight.shadowRoot.append(tooltip); + // Track the original z-index so that we can restore it after hover + const originalZIndex = highlight.style.zIndex; (['mouseover', 'focus'] as const).forEach((event) => { highlight.addEventListener(event, () => { + highlight.style.zIndex = '9999999999'; tooltip.dataset.show = 'true'; const originalRect = originalElement.getBoundingClientRect(); const dialogRect = tooltip.getBoundingClientRect(); @@ -77,6 +80,7 @@ export function attachTooltipToHighlight( (['mouseout', 'blur'] as const).forEach((event) => { highlight.addEventListener(event, () => { tooltip.dataset.show = 'false'; + highlight.style.zIndex = originalZIndex; }); }); } diff --git a/packages/astro/src/runtime/client/dev-overlay/plugins/xray.ts b/packages/astro/src/runtime/client/dev-overlay/plugins/xray.ts index ed1be3ede..8ce16f7c4 100644 --- a/packages/astro/src/runtime/client/dev-overlay/plugins/xray.ts +++ b/packages/astro/src/runtime/client/dev-overlay/plugins/xray.ts @@ -80,7 +80,6 @@ export default { const rect = islandElement.getBoundingClientRect(); const highlight = createHighlight(rect); const tooltip = buildIslandTooltip(island); - attachTooltipToHighlight(highlight, tooltip, islandElement); // Set the z-index to be 1 higher than the greatest z-index in the stack. // And also set the highlight/tooltip as being fixed position if they are inside @@ -94,6 +93,7 @@ export default { tooltip.style.position = highlight.style.position = 'fixed'; } + attachTooltipToHighlight(highlight, tooltip, islandElement); canvas.append(highlight); islandsOverlays.push({ highlightElement: highlight, island: islandElement }); }); |