ui,ui-components: Tooltip is mis-centered for inline targets

[jocrl]

Problem:
cockroachdb/ui#290 introduced a wrapping div around the target children for the ui-components Tooltip component. This causes inline target elements (e.g. buttons) wrapped by Tooltip to behave like block elements within their parent component, including mis-centering the tooltip at the center of the block instead of the at the center of the inline element.

cockroachdb/ui#396 adds a story that demonstrates this:

The goal of cockroachdb/ui#290 was to make it so that if your mouse continued to stay over the tooltip it would not leave, allowing users to click on links in the tooltip. A naive attempt of moving these props (https://github.com/cockroachdb/ui/pull/290/files#diff-f78af0a31de2edadb9ecd5ac3f5ed5999c1f9a66965d75b74da494b7d3c8ea49R79) with the introduced timeout directly to the child component (where they used to be, https://github.com/cockroachdb/ui/pull/290/files#diff-f78af0a31de2edadb9ecd5ac3f5ed5999c1f9a66965d75b74da494b7d3c8ea49L72) broke the ability to keep the tooltip open by hovering open the tooltip. It looks like the code works precisely because the enclosing div encompasses the tooltip body in addition to the target.

Solution:
Keeping the tooltip open while hovering the tooltip (not just the target) should be modified/reimplemented in a way that does not introduce an enclosing div.

Implementation suggestion:
The "react tooltip" library has an implementation of keeping the tooltip open when the tooltip body is hovered https://github.com/wwayne/react-tooltip/blob/master/src/index.js#L222. The react-bootstrap and chakra libraries' tooltips do not have this feature.

Additional suggestion that would go well with this:
When the enclosing div is removed, the code would likely go back to assuming that there is only one child (passing the one target ref to multiple children would be weird). Calling React.Children.only(children) or verifying the children count would be helpful to enforce this.

Jira issue: CRDB-10894

[blathers-crl]

Hi @jocrl, I've guessed the C-ategory of your issue and suitably labeled it. Please re-label if inaccurate.

While you're here, please consider adding an A- label to help keep our repository tidy.

_{🦉 Hoot! I am a Blathers, a bot for CockroachDB. My owner is otan.}

[github-actions]

We have marked this issue as stale because it has been inactive for
18 months. If this issue is still relevant, removing the stale label
or adding a comment will keep it active. Otherwise, we'll close it in
10 days to keep the issue queue tidy. Thank you for your contribution
to CockroachDB!