[Tooltip display bug] Tooltip will close if the tooltip height dynamically expand and exceeds the viewport

[ChouJoe]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Steps to reproduce 🕹

Link to live example: https://codesandbox.io/s/frosty-wave-8r1mqt?file=/demo.tsx Steps: 1 open the sandbox link, and maximum your browser

2. hover on "TOOLTIP", then tooltip appears
3. click the button, the tooltip height will expand, then the tooltip blink on the top of "TOOLTIP" and closed

Current behavior 😯

click the button, the tooltip height will expand, then the tooltip blink on the top of "TOOLTIP" and closed

Expected behavior 🤔

first of all, it's reasonable that the tooltip should be showed on the top of element since its' height exceeds the viewport, however, it should be visible consistently rather than blink and closed unexpectedly

Context 🔦

In my project, my tooltip will show general message and detail message, the detail message is hidden by default, and will show when user click the button. And I find this issue in the case of if tooltip is show near the viewport of browser.

Your environment 🌎

npx @mui/envinfo

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

[mj12albert]

@ChouJoe I can’t reproduce your issue consistently, but you may be able to avoid the issue by explicitly positioning your tooltip using the placement prop (doc)

[ChouJoe]

@ChouJoe I can’t reproduce your issue consistently, but you may be able to avoid the issue by explicitly positioning your tooltip using the placement prop (doc)

To reproduce the issue, you need maximum the browser so that the tooltip example in codesanbox will exceeds the browser viewport. it could be reproduced consistently. Besides, the palcement doesn't work for me as I tried to set it to "bottom"

[mj12albert]

It reproduces when there is enough (vertical) space for the unexpanded tooltip content between the trigger and the bottom edge of the viewport, but not enough space for the expanded content.

I think this is due to the underlying popper repositioning itself after the tooltip content size changed, losing cursor focus, then it closed.

However this is the expected behavior for the Tooltip and popper and not a bug.

@ChouJoe for your use-case, if you need a tooltip trigger near the bottom edge of the viewport, could you use placement="top" so the tooltip shows above the trigger and has room for the contents to expand upwards? I think it may be a better UX than a visible tooltip expand and move at the same time.

Alternatively, you could use PopperProps and popperOptions like this to further customize the positioning behavior. (See the Tooltip and Popper docs)

<Tooltip
  PopperProps={{
    placement: "bottom",
    popperOptions: {
      modifiers: [
        {
           name: "flip",
           // disable the default "flip" behavior, allow tooltips to overflow
           enabled: false
        },
      ]
    }
   }}
  title={/* your contents */}
>
  <Button>Tooltip</Button>
</Tooltip>

[ChouJoe]

Context

since in our context, the tooltip item is in a list component, which is scrollable, so we can not simply define placement = top to solve the issue, because it may exceeds the top boundary of viewport too. Also I tried the PopperProps and popperOptions to disable the flip of tooltip , however, the tooltip can not show entirely in this way. All in all, thanks for help