Refactor tooltip component to use floating-ui

[just-be-dev]

Closes #854

This PR updates our tooltip implementation to use floating-ui. Previously we were using react-popper which is now in maintenance mode in favor of floating UI. Overall floating UI provides a more robust, composable API that's generic enough to be applied to any floating UI situation like tooltips, dropdown menus, etc.

I've also integrated the elevation tokens which were added in #1284.

I've tried to keep the baseline implementation as close to the original as possible to minimize changes. Eventually I'd like to be able to generically attach a tooltip to any element (and not have it tied to the underlying button like we have here), but that can wait until there's a specific usecase.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
console-ui-storybook	✅ Ready (Inspect)	Visit Preview	Nov 8, 2022 at 10:34PM (UTC)

[david-crespo]

Don't know if this needs to be fixed here or not, but it doesn't behave nicely when it's getting cut off like this (this is the Ladle story for FieldLabel with tip):

[just-be-dev]

Yeah @david-crespo this is something I think I need to follow up on upstream. So it seems it's only picking between the four primary sides (top, left, bottom, right) instead of doing what would be right in this situation by selecting bottom-start. It seems like this behavior is intentional based on the docs so I'll start a conversation and see what shakes out.

[just-be-dev]

So, yeah. Placements for the autoplacement middleware are ultimately chosen by this getPlacementList function. When no alignment option is passed to the middleware it uses only the sides (top, bottom, left, right). We can add an alignment (start or end), but that will only give you that set of alignments. I suspect what we actually want is an ordered list of all alignments starting with the base sides, then start, then end.

I'll work to put together a minimal reproduction and open up an issue upstream.

[david-crespo]

Very clean. floating-ui looks great.

[david-crespo]

I do have one use case that's not the FieldLabel and not a button: #641

Something to follow up on is adding a short delay (maybe default on but configurable): https://floating-ui.com/docs/FloatingDelayGroup

[just-be-dev]

I'm going to go ahead and merge this. I'll work to have an upstream issue w/ a small replication of the rendering out of bounds issue we saw. Will follow up with breaking it down to be able to attach tooltips to other items too.