Infrastructure/astro
0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2025-01-13 22:11:20 -05:00
Code Issues Activity

[Toolbar] Fix tooltip overlap bug (#9283)

Browse source
This commit is contained in:
Fred K. Schott 2023-12-04 05:24:22 -08:00 • committed by GitHub
parent feaba2c7fc
commit 7a231e4763
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 5 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
packages/astro/src/runtime/client/dev-overlay/plugins/utils/highlight.ts
View file

@ -57,9 +57,12 @@ export function attachTooltipToHighlight(
originalElement: Element originalElement: Element
) { ) {
highlight.shadowRoot.append(tooltip); 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) => { (['mouseover', 'focus'] as const).forEach((event) => {
highlight.addEventListener(event, () => { highlight.addEventListener(event, () => {
highlight.style.zIndex = '9999999999';
tooltip.dataset.show = 'true'; tooltip.dataset.show = 'true';
const originalRect = originalElement.getBoundingClientRect(); const originalRect = originalElement.getBoundingClientRect();
const dialogRect = tooltip.getBoundingClientRect(); const dialogRect = tooltip.getBoundingClientRect();
@ -77,6 +80,7 @@ export function attachTooltipToHighlight(
(['mouseout', 'blur'] as const).forEach((event) => { (['mouseout', 'blur'] as const).forEach((event) => {
highlight.addEventListener(event, () => { highlight.addEventListener(event, () => {
tooltip.dataset.show = 'false'; tooltip.dataset.show = 'false';
highlight.style.zIndex = originalZIndex;
}); });
}); });
} }

2
packages/astro/src/runtime/client/dev-overlay/plugins/xray.ts
View file

@ -80,7 +80,6 @@ export default {
const rect = islandElement.getBoundingClientRect(); const rect = islandElement.getBoundingClientRect();
const highlight = createHighlight(rect); const highlight = createHighlight(rect);
const tooltip = buildIslandTooltip(island); const tooltip = buildIslandTooltip(island);
attachTooltipToHighlight(highlight, tooltip, islandElement);
// Set the z-index to be 1 higher than the greatest z-index in the stack. // 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 // 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'; tooltip.style.position = highlight.style.position = 'fixed';
} }
attachTooltipToHighlight(highlight, tooltip, islandElement);
canvas.append(highlight); canvas.append(highlight);
islandsOverlays.push({ highlightElement: highlight, island: islandElement }); islandsOverlays.push({ highlightElement: highlight, island: islandElement });
}); });