In the acquisitions table, the AcquisitionQuartilesTooltip popup is cut off and painted behind the table — behind the sticky header and sibling rows (see original screenshot: evealzindex.png).
Root cause: the shared Tooltip component (src/components/tooltip/Tooltip.vue) renders its popup inline as an absolute descendant inside a z-10 relative wrapper. Inside AcquisitionResultTable, which is a VirtualScrollTable, the popup is:
clipped by the virtual-list scroll container (overflow: auto + max-height), and
painted below the sticky thead/tfoot (z-10) and sibling rows.
No z-index change can fix this — a descendant cannot escape an ancestor's overflow. The popup has to leave the scroll container's subtree. Dropdown.vue already solves this exact class of problem by teleporting its floating panel to <body> and positioning it from the trigger's bounding rect; Tooltip never got that treatment.
Scope
Fix the shared Tooltip component: teleport the popup to <body> (mirroring Dropdown.vue), positioned from the trigger's bounding rect via useElementBounding.
Preserve the existing up/down + left/right quadrant flip (based on the trigger's screen position) so the popup never runs off-screen — re-expressed as fixed screen coordinates instead of the old inline anchoring.
Give the teleported popup a concrete z-index above body-level content (e.g. z-30: above the z-20 select overlays, below z-50 toasts).
Clean up the now-dead scoped positioning hacks in AcquisitionQuartilesTooltip.vue (-left-1/2, bottom: 75px) that relied on the old inline anchoring.
Out of scope
A global named z-index layering scale, or migrating the existing ad-hoc z-10/z-20/z-50 usages onto it — separate future issue.
The modals (the old title's "modals" was a misnomer; the actual defect is the tooltip).
Hover-bridging onto the popup — the content is read-only, so hover stays on the trigger header.
Acceptance criteria
Opening the quartiles tooltip in the acquisitions table shows the full popup, unclipped, rendered above the sticky header and all rows.
The popup still flips based on the trigger's screen position (no viewport overflow near screen edges).
The popup stays anchored to its trigger.
Related
Shares its root cause and fix pattern with Dropdown.vue (already teleports its floating panel to <body>).
## Summary
In the acquisitions table, the `AcquisitionQuartilesTooltip` popup is cut off and painted behind the table — behind the sticky header and sibling rows (see original screenshot: [evealzindex.png](https://gitea.shendai.rip/attachments/7cf2cfa7-f83f-4864-9890-960225f42682)).
Root cause: the shared `Tooltip` component (`src/components/tooltip/Tooltip.vue`) renders its popup **inline** as an `absolute` descendant inside a `z-10 relative` wrapper. Inside `AcquisitionResultTable`, which is a `VirtualScrollTable`, the popup is:
- **clipped** by the virtual-list scroll container (`overflow: auto` + `max-height`), and
- **painted below** the sticky `thead`/`tfoot` (`z-10`) and sibling rows.
No z-index change can fix this — a descendant cannot escape an ancestor's `overflow`. The popup has to leave the scroll container's subtree. `Dropdown.vue` already solves this exact class of problem by teleporting its floating panel to `<body>` and positioning it from the trigger's bounding rect; `Tooltip` never got that treatment.
## Scope
- Fix the **shared `Tooltip`** component: teleport the popup to `<body>` (mirroring `Dropdown.vue`), positioned from the trigger's bounding rect via `useElementBounding`.
- **Preserve** the existing up/down + left/right quadrant flip (based on the trigger's screen position) so the popup never runs off-screen — re-expressed as fixed screen coordinates instead of the old inline anchoring.
- Give the teleported popup a **concrete z-index above body-level content** (e.g. `z-30`: above the `z-20` select overlays, below `z-50` toasts).
- Clean up the now-dead scoped positioning hacks in `AcquisitionQuartilesTooltip.vue` (`-left-1/2`, `bottom: 75px`) that relied on the old inline anchoring.
## Out of scope
- A global named z-index layering scale, or migrating the existing ad-hoc `z-10`/`z-20`/`z-50` usages onto it — separate future issue.
- The modals (the old title's "modals" was a misnomer; the actual defect is the tooltip).
- Hover-bridging onto the popup — the content is read-only, so hover stays on the trigger header.
## Acceptance criteria
- Opening the quartiles tooltip in the acquisitions table shows the full popup, unclipped, rendered above the sticky header and all rows.
- The popup still flips based on the trigger's screen position (no viewport overflow near screen edges).
- The popup stays anchored to its trigger.
## Related
- Shares its root cause and fix pattern with `Dropdown.vue` (already teleports its floating panel to `<body>`).
Sirttas
changed title from in acquisition some modals are behind some stuff to Tooltip popup is clipped/hidden behind table content (teleport it to body)2026-07-16 16:46:09 +02:00
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
Summary
In the acquisitions table, the
AcquisitionQuartilesTooltippopup is cut off and painted behind the table — behind the sticky header and sibling rows (see original screenshot: evealzindex.png).Root cause: the shared
Tooltipcomponent (src/components/tooltip/Tooltip.vue) renders its popup inline as anabsolutedescendant inside az-10 relativewrapper. InsideAcquisitionResultTable, which is aVirtualScrollTable, the popup is:overflow: auto+max-height), andthead/tfoot(z-10) and sibling rows.No z-index change can fix this — a descendant cannot escape an ancestor's
overflow. The popup has to leave the scroll container's subtree.Dropdown.vuealready solves this exact class of problem by teleporting its floating panel to<body>and positioning it from the trigger's bounding rect;Tooltipnever got that treatment.Scope
Tooltipcomponent: teleport the popup to<body>(mirroringDropdown.vue), positioned from the trigger's bounding rect viauseElementBounding.z-30: above thez-20select overlays, belowz-50toasts).AcquisitionQuartilesTooltip.vue(-left-1/2,bottom: 75px) that relied on the old inline anchoring.Out of scope
z-10/z-20/z-50usages onto it — separate future issue.Acceptance criteria
Related
Dropdown.vue(already teleports its floating panel to<body>).Still a better issue than 99% of issues on https://github.com/Sirttas/ElementalCraft
in acquisition some modals are behind some stuffto Tooltip popup is clipped/hidden behind table content (teleport it to body)