Investigation: Switch to a non-Radix solution for tooltips?

[robintown]

@t3chguy's efforts to start using the Compound Web tooltip component in more places across Element Web are running into a number of roadblocks due to quirks of the Radix-based implementation:

• The internals of Radix's "slots" system (which is responsible for enabling any arbitrary component to become a tooltip trigger) messes with the timings at which refs to a trigger are set up, making it very difficult to migrate roving tab index groups that contain tooltips, for example. Refs aren't reliably set up by useLayoutEffect time anymore.
• It's not clear how to use tooltips as labels for icons in an accessible way. Apparently:
  • https://github.com/radix-ui/primitives/issues/697#issuecomment-858802677 suggests fully controlling the component and specifying aria-label when the tooltip isn't open
  • https://github.com/radix-ui/primitives/issues/1952#issuecomment-1428843843 suggests providing a permanent aria-label, which potentially prevents captions from being read
• They appear to cause some other AXE violations and testing difficulties. It's unclear to me how many of these are avoidable with Radix given proper use of aria-labels etc. and changes in testing strategy.
• The React tree for a single tooltip is considerably larger than those of Element Web's current implementation, which could cause performance regressions. (I would like to see some concrete data on how this affects performance, however, before considering it a blocker.)

As a result, I've begun looking into alternative component libraries that we could build our tooltip component on, in case one of them gives us an obviously easier way to move this task forward. Currently, the only other mature, unstyled React component libraries than I'm aware of are React Aria and MUI Base UI.

• React Aria: This one's tooltip component looked promising since we've used it successfully in Element Call. But after investing some time into converting our tooltip implementation to this library, I discovered a hidden requirement: The tooltip trigger must be a Button from React Aria, or else to call specific hooks from React Aria in order to actually function and trigger the tooltip. In short, this requires way more commitment to React Aria from us than I'm comfortable with. Our tooltip component really needs work with Element Web's homebrewed button components out of the box, which I don't see being possible here. React Aria tooltips also produce a React tree practically just as large as Radix does.

I have yet to investigate MUI Base UI. If that doesn't work out though, we should reconsider whether there's a way forward that still uses Radix. Implementing a tooltip component from scratch is also on the table, but I would really like to avoid this.

[robintown]

Another option: Floating UI

On first glance this looks really promising! It's all based on hooks rather than components, which would allow us to keep our React trees shallow, and the package includes hooks for menus, which could be an interesting alternative to Radix menus in the future as well. I say this because Radix menus have turned out to be a little inflexible when it comes to keyboard focus of custom menu elements.

[florianduros]

@robintown Can you close the issue ? It was done in https://github.com/element-hq/compound-web/pull/156 Thanks!

(I don't have the rights in this repo)