fix(components): mutations-over-time tooltip overflow without scroll

[fhennig]

resolves #984, resolves #981

Summary

Adds a new PortalTooltip that uses a portal internally to position the tooltip. In the mutations-over-time component and the grid, we're passing through an outer div ref where we can render the tooltip to.

This fixes the issues, because the tooltip is no longer inside the tab, so it doesn't cause the overflow and scroll bars anymore. The portal is also still inside the shadow DOM, so it doesn't break out of the shadow DOM.

Screenshot

Screen.Recording.2025-10-28.at.11.33.27.mov

PR Checklist

• All necessary documentation has been adapted.
• The implemented feature is covered by an appropriate test.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
dashboard-components	Ready	Preview	Comment	Oct 29, 2025 11:24am

[github-actions]

This is a preview of the changelog of the next release. If this branch is not up-to-date with the current main branch, the changelog may not be accurate. Rebase your branch on the main branch to get the most accurate changelog.

Note that this might contain changes that are on main, but not yet released.

Changelog:

1.9.0 (2025-10-29)

Features

• components: always mount tooltip, but keep invisible when not hovered (bf26296)
• components: don't init top/left (83887cb)
• components: simplify (90f1270)
• components: use digit grouping separators in dropdown filter counts (#1013) (c03206a)

Bug Fixes

• components: mutations-over-time tooltip overflow without scroll (77704f1)
• components: react -> preact typo (cd96f91)

[fengelniederhammer]

Looks good in general 👍

Did you try how it looks on the dashboards?

[Copilot]

Pull Request Overview

This PR fixes tooltip overflow issues in the mutations-over-time component by introducing a new PortalTooltip component that renders tooltips outside their parent containers using React portals. This prevents tooltips from being clipped by containers with overflow constraints while maintaining shadow DOM encapsulation.

Key changes:

• Created a new PortalTooltip component that uses portals and fixed positioning to escape overflow constraints
• Added tooltipPortalTarget refs in both wastewater and standard mutations-over-time components to specify where tooltips should render
• Refactored the existing Tooltip component to extract shared base styles and added documentation distinguishing the two tooltip implementations

Reviewed Changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
wastewater-mutations-over-time.tsx	Added tooltipPortalTargetRef and wrapped component in a div to serve as the portal target
mutations-over-time.tsx	Added tooltipPortalTargetRef and wrapped component in a div to serve as the portal target
mutations-over-time-grid.tsx	Updated to use PortalTooltip instead of Tooltip and pass through the portal target prop
tooltip.tsx	Extracted TOOLTIP_BASE_STYLES constant and added documentation explaining when to use PortalTooltip instead
portal-tooltip.tsx	New component implementing portal-based tooltips with dynamic positioning and hover state management

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[fengelniederhammer]

Let's try it 👍

I asked some AIs about the ref handling, they didn't have a much better approach either. One suggested to use floating UI instead of manually positioning the tooltips. That might be a little more convenient and we already use floating UI already, but I don't think there is a real need to migrate the tooltips to floating UI now.