[Tooltip] Add disabled prop

[DaniGuardiola]

• I have searched the issues of this repository and believe that this is not a duplicate.

I found this issue which is vaguely related, I think: #1500

Summary 💡

Sometimes it's useful to have an uncontrolled tooltip for, say, an icon button that opens a menu. When the menu is open, the tooltip might overlap with the menu, so it's best to hide it.

Now, you can hide the tooltip by setting the title to an empty string, but this has the issue that the tooltip suddenly collapses while fading away, which is not very nice. I've tried other ways like disabling the listeners but that causes a lot of problems.

Making the tooltip controlled and manually implementing the event listeners and all is overkill for just this thing.

I think it could be easily solved with a disabled property, so that it can be safely disabled without this ugly UI issue while remaining uncontrolled.

Examples 🌈

Instead of:

<Tooltip title={menuOpen ? '' : tooltip} />

Do:

<Tooltip disabled={menuOpen} />

Motivation 🔦

I can share the app I'm building with you if you need more details of a real use-case. Just ask.

[oliviertassinari]

@DaniGuardiola It would have been great to provide a live codesandbox example of the problem to illustrate the menu issue you are referring to. But basically, same as https://codepen.io/oliviertassinari/pen/mdegLMa.

It's something we can face frequently on icon buttons, agreed, I have seed it on Gmail for instance.

I think that it would help to show how you would use the Tooltip with and without this prop. It will help better evaluate the pros. I'm personally in favor of the proposal.

[DaniGuardiola]

@oliviertassinari I can try to make a codesandbox if I find any spare time soon. In the meantime, check my (WIP and broken) text editor at lab.daniguardiola.me

The menu to the left has two elements which display a sub-menu with this problem. Hope that can be enough for now until I can get around to coding the codesandbox.

Thank you :)

[eps1lon]

I couldn't reproduce this issue in any of the links. It's not obvious to me that the issue description isn't a bug. A tooltip should not appear if a menu is open.

[oliviertassinari]

@eps1lon I have updated my initial comment to contain screenshots, to make it clearer to the others. I'm confused, are you saying that we should label this issue a bug and not an enhancement?

[oliviertassinari]

Hum actually, I couldn't reproduce: https://codesandbox.io/s/material-demo-sdgqw?file=/demo.js. We might want to ignore the problem and close the issue.

[eps1lon]

I meant that I do understand what you're seeing but not how we can reproduce this with Material-UI.

[oliviertassinari]

@DaniGuardiola Do you have a reproduction?

[DaniGuardiola]

@eps1lon @oliviertassinari

Hi, yes. I'm not talking about a Material-UI menu. I'm talking about a custom menu I created and that I control. That's the case in which the tooltip should remain closed. Actually this is not the point, just realized. The point is that I want the tooltip to be uncontrolled. The codesandbox provided does fix the issue but it does so with a controlled tooltip, which is what I would like to avoid, as it becomes too cumbersome just for this little issue.

Check out my ongoing project. If you click the lower button of the left menu you'll see this behavior.

Let me try to create a codesandbox as well.

[DaniGuardiola]

Here's a reproduction of the issue: https://codesandbox.io/s/material-demo-wcfo1?file=/demo.js

Here's my current solution (check the 'title' prop of the tooltip): https://codesandbox.io/s/material-demo-v67ss?file=/demo.js

Here's what I propose: https://codesandbox.io/s/material-demo-kcuko?file=/demo.js

BTW, just noticed that this seems to disable the inner IconButton. Is this intended behavior? It confuses me.

[DaniGuardiola]

Oh and I noticed something by looking at your last codesandbox @oliviertassinari

I noticed that you're using a controlled tooltip, but using the onClose and onOpen events. While this is a way to achieve what I need that I didn't know existed, it seems to me like the addition of a disabled prop would still make my case simpler to fix, as the user (in this case me) doesn't have to worry about controlling every tooltip but still has a way to override the behavior.

[DaniGuardiola]

Updated this comment, as I just realized I was wrong.

[oliviertassinari]

@DaniGuardiola Thanks for the extra details and the discussion. I think that we can close, looking at your application, you shouldn't even need to make the title an empty string. Also, it's not a frequent problem, hence the controllable approach sounds fair.

[DaniGuardiola]

Okay, well in case anybody has this same issue, here's a workaround:

import React, { useState, useEffect } from 'react'

import { Tooltip } from '@material-ui/core'

function DisableableTooltip ({
  disabled,
  children,
  ...tooltipProps
}: TooltipProps & { disabled: boolean }) {
  const [open, setOpen] = useState(false)

  useEffect(() => {
    if (disabled) setOpen(false)
  }, [disabled])

  return (
    <Tooltip
      {...tooltipProps}
      open={open}
      onOpen={() => !disabled && setOpen(true)}
      onClose={() => setOpen(false)}
    >
      {children}
    </Tooltip>
  )
}

Use this component as a drop-in replacement of Toolbar with the additional disabled property.

[Ethorsen]

Thanks, needed this fix for the exact same issue.