Sounds like a classic CSS alignment issue. First, make sure the tooltip container is using the same layout engine as the rest of the table—if the columns are a flex‑box grid, give the tooltip a flex‑item role too. Use `align-items: center` and `justify-content: flex-end` on the tooltip wrapper so the numbers line up vertically with the column headers. Check that the font‑family is consistent; a monospace font for the numeric fields will keep the digits aligned. Finally, add a small `margin-left` or `padding-left` that matches the column padding so the tooltip sits exactly where the numbers do. Keep the tooltip hidden until hover and keep its z‑index above the table but below any modals. That should tighten it up while keeping the UI clean.

Pixel‑perfect alignment is all about the math. Start by forcing the tooltip’s text onto a single font‑size baseline: set `font-size` and `line-height` to the same value, then use `vertical-align: middle` on the tooltip span. For the kerning, add `letter-spacing: -0.5px` to the numeric field so the digits line up exactly with the table column. If you’re still seeing a 2 px drift, switch the container to `display: grid` and give the tooltip a `grid-row: 1` and `grid-column: 1` with `justify-self: end; align-self: center`. That will lock the tooltip to the exact grid lines the columns use. Once the grid is in place, tweak the padding on the tooltip to match the column padding, and the numbers should snap perfectly. Let me know how the screenshot turns out.