[Tooltip][material] When open, the Controlled Tooltip does not follow the target object when it is moved

[m-tartari]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example: Codesandbox (repo: m-tartari/material-ui-issue-38832)

Steps:

1. Install dependencies and start the app:

   npm ci
   npm start

2. Use the button to open/close the sidedrawer.

Current behavior 😯

When open, the tooltip does not follow the target object. Scrolling resets the position

screen-capture.mp4

Expected behavior 🤔

The Tooltip should move with the target object or refresh its position at the end of the transition.

Context 🔦

I need to display multiple text-free items in a workspace similar to the one in the video. The tooltip is used to display item information on hover but can be set to be always open from the app setting to simplify object tracking.

Your environment 🌎

npx @mui/envinfo

  System:
    OS: Linux 5.15 Ubuntu 20.04.6 LTS (Focal Fossa)
  Binaries:
    Node: 18.16.0 - ~/.nvm/versions/node/v18.16.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v18.16.0/bin/yarn
    npm: 9.5.1 - ~/.nvm/versions/node/v18.16.0/bin/npm
  Browsers:
    Chrome: 116.0.5845.140
  npmPackages:
    @emotion/react: ^11.11.1 => 11.11.1 
    @emotion/styled: ^11.11.0 => 11.11.0 
    @mui/core-downloads-tracker:  5.14.8 
    @mui/icons-material: ^5.14.8 => 5.14.8 
    @mui/material: ^5.14.8 => 5.14.8 
    @mui/private-theming:  5.14.8 
    @mui/styled-engine:  5.14.8 
    @mui/system:  5.14.8 
    @mui/types:  7.2.4 
    @mui/utils:  5.14.8 
    @types/react: ^18.2.21 => 18.2.21 
    react: ^18.2.0 => 18.2.0 
    react-dom: ^18.2.0 => 18.2.0 
    typescript: ^5.1.6 => 5.1.6 

[DiegoAndai]

Thanks for the report, @m-tartari! This seems like a bug. I've added the ready to take label for anyone who wishes to start working on this.

[adamhylander]

I can look into this one!

[DiegoAndai]

@adamhylander thanks! please do 😊
Let me know if you need help with anything

[SyedZain714]

@DiegoAndai I can look into it if it is still open

[DiegoAndai]

Thanks for the interest @SyedZain714, I think @adamhylander is working on it. Feel free to collaborate on this issue as well.

[adamhylander]

@SyedZain714 Yes I am working on it right now. I wanna try by myself a bit more but how about I message you when I get stuck? Does that work for you?

[SyedZain714]

Ok

…

On Tue, Sep 26, 2023, 1:34 PM adamhylander ***@***.***> wrote: @SyedZain714 <https://github.com/SyedZain714> Yes I am working on it right now. I wanna try by myself a bit more but how about I message you when I get stuck? Does that work for you? — Reply to this email directly, view it on GitHub <#38832 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ASRODU7FNEMVHJFEYXSJYULX4KHSHANCNFSM6AAAAAA4NHWUQ4> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[adamhylander]

@SyedZain714 Hi, you can look into this issue now if you'd like. Can't seem to solve it. Thank you for being patient!

[SyedZain714]

Ok, I'll check it out. Also can you tell your findings related to it.

…

On Tue, Oct 3, 2023, 12:39 PM adamhylander ***@***.***> wrote: @SyedZain714 <https://github.com/SyedZain714> Hi, you can look into this issue now if you'd like. Can't seem to solve it. Thank you for being patient! — Reply to this email directly, view it on GitHub <#38832 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ASRODU26NT6OC3FS2AVLJGTX5O6LVAVCNFSM6AAAAAA4NHWUQ6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTONBUGM3TKNBUG4> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[adamhylander]

Hey, I went back to this issue again and found the core issue. The issue is that the above example has transition animations which causes a kind of race condition between the animation and the tooltip positioning code. So for example when the page is freshly loaded the following occurs

1. SideDrawerButton is pressed
2. Animation starts
3. Tooltip checks if Box has moved, since it has not it stays
4. Animation is done and box has moved, but without the tooltip

Pressing the SideDrawerButton again and what happens is:

1. SideDrawerButton is pressed
2. Animation starts
3. Tooltip checks if Box has moved. Since box has moved (from the previous SideDrawerButton click), tooltip also moves, but in the wrong direction.
4. Animation is done and box has again moved.

I am not sure how to fix it though. Here is code from MainWorkspace.tsx that correctly positions the tooltip, note that it is about the transition:

export function getStyle(
  theme: Theme,
  sideDrawerWidth: string,
  compactView: boolean
): React.CSSProperties {
  return {
    padding: `0 ${theme.spacing(1)}`,
    width: '100%',
    marginTop: '0',
    marginLeft: '0',
    marginBottom: '0',
    zIndex: theme.zIndex.drawer,
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    gap: theme.spacing(1),

    // side drawer closed
    marginRight: `-${sideDrawerWidth}`,
    transition: theme.transitions.create(['margin', 'gridTemplateColumns'], {
      easing: 'linear', // Instant transition
      duration: '0ms',  // No duration
    }),

    // side drawer open
    ...(compactView && {
      marginRight: 0,
      transition: theme.transitions.create(['margin', 'gridTemplateColumns'], {
        easing: 'linear', // Instant transition
        duration: '0ms',  // No duration
      }),
    }),
  };
}

I also noted that the demo given by the author had some ambiguous index.ts files which had to be redone for the playground environment and was quite annoying to fix. A fully functional playground demo can be found here:
https://github.com/adamhylander/mui-demo-issue-38832

[1CUNHA1]

Hey, is this bug still open?

[DiegoAndai]

@adamhylander's workaround by making the transition instant works. Thanks for providing such a detailed explanation. I'm sorry I didn't reply before.

Of course, the workaround could be better as the transition is instant and not smooth.

For an implementation that allows an actual transition, we could explore hooking into the drawer's transitionend event and maybe implementing some sort of a reposition imperative handler on the tooltip. Maybe there's a simpler way. If anyone wants to explore that, please do! 🚀