`<Tooltip />`: Use a single target element and avoid wrapping in problematic `span`s
Created by: umpox
Problem
Problem 1: Tooltip wrapper intercepts clicks which results in broken functionality for certain links https://sourcegraph.slack.com/archives/C01C3NCGD40/p1655355042832789
Problem 2:
Tooltips are not correctly positioned when the trigger element is position: absolute: this is because the wrapper is separate from the trigger and cannot inherit the styles (it is the parent).
Solution
The root of these problems is that we needed a single React child to Tooltip so we wrapped everything in a <span>. This doesn't seem to be feasible, and it would be better to keep the current supported behavior, continue with the migration and either wait for Radix to finish their compliant fix (supposedly imminent) or come up with a different solution ourselves (e.g. take manual control.)
One option I looked into, was using the Slottable component provided by Radix. This normally allows us to pass multiple children nodes and target a single one, however there is still unexpected behavior. If the Slottable child doesn't render children, Radix will assume it doesn't exist and refuse to render the Tooltip content. This seems quite buggy, especially as this behavior doesn't match what would happen with a single child.
Before
After
Test plan
Tested locally with web-standalone and Storybook
App preview:
Check out the client app preview documentation to learn more.