feat(frontend/table): make error tooltip hoverable with copy button

[CammilleCC]

An attempt to improve the tooltip UX from #204. This is by using a layer, adding trigger resets, introducing an arrow, and reverting to having a copy button.

chrome_z1e8ERIaPK.mp4

[JamesWrigley]

Yeah that's the behaviour I found annoying 😛 My first version looked the same, but I didn't like the tooltip getting in the way when I wanted to view the error of the cells below it. Possibly I have different UX preferences :)

[CammilleCC]

Maybe this is also me having different experience: one of my gripes with tooltips is despite having the opportunity to interact with them (e.g., clicking a link, copying a text), they're very hard to sometimes catch. I'd also like to have more possibilities in the future to add more interactive components onto it, that's why I am happily investigating in this direction.

An example that I'd like is from VS Code:

I understand your concern, I've added some ways to help:

• There's a space between the next cell and the current tooltip, I've increased the size to be able to display the next tooltip and added dwell on open (and removed the event bridge that should help with the transition, now it does more harm than good).
• I've also added an escape button the remove the current tooltip. One can freely hover to the next cell to display the next one.

Please try it out and let me know what you think 😊 feel free to change the following to find settings that you deem best:

• CLOSE_GRACE_MS: to hover to the tooltip body, to automatically close after existing and landing to a non-error cell
• OPEN_DWELL_MS: to open a new tooltip, to switch to the next tooltip

chrome_co8KOSGouY.mp4