Material-ui: [Tooltip] Enhancement - Tooltip should not display when there is no value for 'title'

[StevenRasmussen]

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

Expected Behavior

Sometimes the value for the 'title' could be calculated and may be set to null. In this instance the tooltip should not be shown.

Current Behavior

Tooltip is shown regardless of whether there is a value for 'title' or not

Steps to Reproduce

https://codesandbox.io/s/z65pow4773

I believe putting the following code here would resolve the issue:

if(this.props.title === null || this.props.title === undefined || this.props.title === "")
   return;

[mbrookes]

@SimplerSoftware Your suggestion seems reasonable. Thanks for the taking the time to create a reproducible example! Feel free to submit a PR. 👍

[oliviertassinari]

I think that the propTypes should be stricter:
https://github.com/mui-org/material-ui/blob/ddde3c93235f170d2781749a8907005fc12372eb/src/Tooltip/Tooltip.js#L439-L442
@SimplerSoftware Why rendering a Tooltip component if you are not going to use it? It's inefficient.

[StevenRasmussen]

@oliviertassinari In principal I agree with your thoughts. However, in practice it may not be optimal in some instances. Right now I am using the tooltip to provide feedback while completing a form. As the user types in a textbox I may display information to them. Since the tooltip wraps the component for which it is providing the text for, if the user types something and the tooltip appears (is rendered), the input loses focus. Conversely, if the tooltip is visible but then disappears while the user is typing then the input loses focus. There's probably a workaround that I could try and figure out to keep the focus but I feel the tooltip should allow for this type of scenario. I have updated the example here

[ThadeuLuz]

I agree that title prop should be required

@SimplerSoftware is there a good reason why you are not using the good old helperText prop or the FormHelperText in the TextField? Whats the advantage of using a tooltip?

If you really need it, you can simply fix your problem with a new component:

const ConditionalTooltip = ({ title, children }) =>
  title ? <Tooltip title={title}>{children}</Tooltip> : children;

[StevenRasmussen]

@ThadeuLuz The main reason is due to real estate. I'm using the controls in a grid and were I to use the 'FormHelperText' then it would just spread things out way too much. Re new component: As I mentioned above and with the updated example, the control loses focus on the re-render. If I'm not mistaken your example would do the same thing. Maybe I'm missing something? Here's a screenshot of the grid for reference:

[oliviertassinari]

@SimplerSoftware Why don't you control the open property of the component? You can keep the Tooltip mounted this way.

So, I think that the best path going forward is to warn when the title property is an empty string and the component isn't controled.

[StevenRasmussen]

@oliviertassinari I can certainly do that (and had thought of that as well) but I would end up duplicating much of the code that is already handled by the tooltip internals. I want the tooltip to still behave the same way and only show upon hover etc. I figured this is something that should be accounted for by the tooltip itself and so I took the time to open this issue. I'm not really seeing any downside to having the tooltip support this so I'm a bit surprised that there's so much push back. Anyway, let me know either way so I can either work on a workaround or take the effort to create a pull request for this to be supported. Thanks

[oliviertassinari]

I'm not really seeing any downside to having the tooltip support this

It can create mistrust about our API. Let's say we add this logic. One might not understand why the Tooltip doesn't open, worse. One might not notice, that for some reason, his title is an empty string. On the other hand, the current behavior provides a better error recovery story. At the root, what you are looking for is a component that can be controlled and uncontrolled during the same mount lifecycle. It's something we don't support for userland logic simplicity.

[oliviertassinari]

I think that we need to do some benchmark (look for the behavior of the other librairies) before commiting in one direction.

[oliviertassinari]

Tooltips with zero-length titles are never displayed.

Bootstrap. This makes sense as you don't want to disturb the user with displaying an empty Tooltip. So either way. I'm happy with the solution we pick.