[Toolbar] Fix tooltip overlap bug (#9283)

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 });
 			});