[Tooltip] Add disabled prop

• 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.

[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.

[eps1lon]

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