Using FloatingUI with Tooltips

[gretanausedaite]

Changes

Added FloatingUI and used it in Tooltip:

• Updated Tooltip to use floatingUI.
• Tooltip uses portal
• Updated reference functionality to use callback and set ref to user provided element
• Added pointer events to the Tooltip to allow hovering and selection

Testing

• Unit tests
• Visual tests

Docs

[gretanausedaite]

@mayank99 Checkpoint if the approach is correct:
Added useTooltip hook and NewTooltip React component that mimics almost all functionality previous tooltip had. I think we could make useTooltip hook to be more generic and add more options to it for customization (Tooltip vs Dialog vs Menu).
I think it's ok if we don't have same functionality as previously on Tooltips, eg. trigger prop.

[mayank99]

I think we could make useTooltip hook to be more generic and add more options to it for customization (Tooltip vs Dialog vs Menu).

On the contrary, I think this hook should be moved inside the Tooltip file. Tooltip is very different from Menu, so it would be better not to share code.

---

In general looks ok so far, other than three comments.

1. is it possible to avoid the extra div here? i am going to add an extra div in add portal container to context #1300 so it would be nice if we could just use that instead.
   

2. we will definitely need a bunch of customization options. three important ones: appendTo equivalent, ability to turn off modifiers, ability to change between aria-describedby, aria-labelledby, and nothing.

3. we need to try to make this tooltip more accessible than the previous one. for example, hovering away from the trigger and onto the tooltip should not dismiss the tooltip. and pressing Escape should dismiss it. See https://sarahmhigley.com/writing/tooltips-in-wcag-21/

[gretanausedaite]

1. is it possible to avoid the extra div here? i am going to add an extra div in add portal container to context #1300 so it would be nice if we could just use that instead.

That div comes from FloatingPortal I am using to portal tooltip on given element. I think we could use just one portal (new one). They provide hook (if we need it): https://floating-ui.com/docs/FloatingPortal#usefloatingportalnode

2. we will definitely need a bunch of customization options. three important ones: appendTo equivalent, ability to turn off modifiers, ability to change between aria-describedby, aria-labelledby, and nothing.

We can easily override aria props. I added appendTo which goes to portal element.
TooltipContent:

[gretanausedaite]

@mayank99 I think this is in a good shape for review.

[gretanausedaite]

Should be allow users to customise interactions? eg. disable tooltip on focus.

[mayank99]

it would be nice to give control, but i fear that developers will start removing focus as trigger, making tooltips inaccessible

[gretanausedaite]

Not giving control for now. We can add that later.

[gretanausedaite]

Allow users to customise middleware?

[mayank99]

yes. see iTwin/iTwinUI-react#783 and iTwin/iTwinUI-react#947

[gretanausedaite]

Maybe adding prop would be ok?

middleware?: {
  offset?: number;
  flip?: boolean;
  ..etc;
}

[mayank99]

Yeah, lets control all the names now. Other option would be to allow user to pass any and all middleware, but then they might start doing weird things

I also think it should be possible for the user to toggle autoUpdate

[gretanausedaite]

autoUpdateOptions were added.

[mayank99]

LGTM. 🚀

One more thing I would like to see is the ability to switch between aria-describedby vs aria-labelledby vs no aria. This will allow us to use <Tooltip> inside <IconButton>. But it can be done in a future PR.

Another thing we should do is add FloatingDelayGroup inside ButtonGroup. Again can be done in a future PR.