<Tooltip> Performance problems in <Table>

[Woyken]

Describe the bug (current behavior)

Using \<Tooltip> components in \<Table> is causing MAJOR performance problems. Scrolling becomes jumpy, laggy. Mostly visible in Chromium browsers. Firefox works a bit better (not perfect)

There are cases where we want to add a Tooltip on icon in table cell

Expected Behavior

\<Tooltip> Should not impact scrolling performance

Link to minimal repro

https://stackblitz.com/edit/github-1zi5p3?file=src%2FApp.tsx

Steps To Reproduce

1. Create table with 100 rows. Render rows with \<Tooltip>
2. Try scrolling the table

Anything else?

Using version: @itwin/itwinui-react: 3*

[Woyken]

Tested on Mac, looks like it handles scroll better, elements disappear for a while. On windows Chrome scrolling is terrible

[Ben-Pusey-Bentley]

Hello, thank you for submitting this issue. I was able to confirm the performance issues on Windows, on Chrome and Firefox, with Firefox working a bit better, as the issue mentions. @mayank99 seems like all of the floating-ui elements are being rerendered on react-table scroll, which causes the performance issue. Do you know of a way that we could potentially memo them?

[mayank99]

While custom cells are always going to be a problem when every row has multiple of them and when there are hundreds of (unvirtualized) rows, we can definitely optimize our Tooltip component to not update its position when it's not visible.

Screen recording below shows that floating-ui currently attempts to keep updating the tooltip position even when they're hidden; I might report this is as a bug in floating-ui even if we implement a workaround in iTwinUI

Screen recording

https://github.com/iTwin/iTwinUI/assets/9084735/8cf0b21a-2a72-4449-8825-d118d1ae72ff

Unrelated: Tooltip should not be used on non-interactive trigger elements (such as text or icon). See docs.

[mayank99]

Fixed in 3.9.1 🚀