Infrastructure/astro
0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2024-12-30 22:03:56 -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
) {
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;
});
});
}

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

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