[Tooltip] Stays visible when scrolling away

[BTish]

Steps to reproduce

Steps:

1. Open this link to live example
2. Hover over one of the tooltips in the Last Name column
3. Scroll away (without moving the mouse)
4. You'll notice the tooltip stays open

Current behavior

The tooltip stays open on scroll .

Expected behavior

The tooltip should close when scrolled away from.

Context

We are using a tooltip inside of a data grid. When a user hovers the tooltip, we have an api call that happens to populate the it's contents. This call takes milliseconds to complete. When a user hovers the tooltip, and scrolls in the Datagrid, the tool tip stays open even though the user's cursor is no longer hovering the tooltip.

Order ID: 80452

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: Tooltip, stays open, tooltip hover

[aarongarciah]

I'm able to reproduce the behavior you describe. Not sure if it can be considered a bug or not.

React Aria and Radix close the tooltip as soon as the cursor leaves the trigger, no matter if a scroll event or the user moving te cursor caused it. Ariakit has the same behavior as the one in Material UI: the tooltip is not closed when the cursor leaves the trigger because of the user scrolling; it's only closed after the user moves the cursor.

[BTish]

@aarongarciah - Thanks for the quick reply.

I've updated the stackblitz code to have a timeout to simulate an api call to set the text and opening the tool tip (This is what we're doing in our application). If you hover over one, and quickly move to a different one or scroll, you'll be able to tell when you even move the mouse, that the tooltip stays open.

[mj12albert]

Closing when the cursor leaves the trigger no matter the reason (scroll, actual cursor move) feels more correct to me. It would also be closer to how the behavior is described in:

The ARIA pattern (though a WIP):

(the tooltip) remains open as long as the cursor is over the trigger or the tooltip.

Material Design 2:

Tooltip disappears when cursor moves out of the touch target

[aarongarciah]

@BTish I agree with @mj12albert. What you're trying to achieve is outside of a tooltip pattern.

Maybe a Popover is better suited for your use case. We had a recent issue where this was discussed, see #44554 (comment). Tooltips are meant to display secondary info (e.g. provide more context on a button that performs an action) while popovers are meant to display primary info and the sole purpose of the popover trigger is to open the trigger. Let me know if this helps.

In a future major version, once we adopt Base UI in Material UI's Popover, we'll have first-class support to open Popovers via hover.

[mj12albert]

What you're trying to achieve is outside of a tooltip pattern.

Wait, regardless of the use-case, we are all agreeing with OP's reported current and expected behavior right? (the Datagrid part isn't relevant)

Current behavior
The tool tip stays open on scroll inside a Datagrid.

Expected behavior
The tool tip should close when scrolled away from.

I think this could be considered a bug 🤔

[aarongarciah]

@mj12albert I mixed a couple of issues in my previous response, sorry about that. I redacted my comment. I agree, closing the Tooltip when scrolling away seems a better default. Do you know how this will be handled in the Base UI rewrite? AFAIK the tooltip is closed when scrolling away but only after the user has stopped scrolling.

@BTish if the content you're displaying in the Tooltip is something that's vital for the UX and not something secondary, maybe Popover is a better fit for your use case.

[BTish]

@BTish if the content you're displaying in the Tooltip is something that's vital for the UX and not something secondary, maybe Popover is a better fit for your use case.

Sounds great. Thanks @aarongarciah. I've talked with our UI/UX and we're going to go with the Popover route.

[aarongarciah]

Nice @BTish. I'll keep this issue open so we tackle this in the future although this issue will probably be solved once we adopt Base UI.