[Tooltip] Don't show if title is undefined, null or false

[YuriGor]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

Tooltip shouldn't be shown if title property is undefined, null or boolean false.
Currently only explicit empty string works and for null / undefined / false empty screwed tooltip is still show,

Examples 🌈

https://codesandbox.io/s/basictooltip-material-demo-forked-zy0vq?file=/demo.js

Motivation 🔦

It's a common approach in React to not render undefined / null / false element, same expected from tooltip.

[michaldudak]

It makes sense. However, there could be applications that rely on the existing behavior, so I'd propose waiting for v6 with such a change.

A workaround, for now, would be to fall back to an empty string if a value is nullish or false:

function BetterTooltip(props)  {
    return <Tooltip {...props} title={(props.title != null && props.title !== false) ? props.title : '')}  />
}

[YuriGor]

Hi @michaldudak I can't imagine how any application could use such a weird empty rudiment of tooltip as you see on screenshot.

[michaldudak]

Perhaps not exactly what's on the screenshot, but custom styled version. Your proposal, while being perfectly valid, touches the public API that should not change between major versions.

[oliviertassinari]

This issue feels almost like a duplicate of #9714. On that older issue, the argument was made that not accepting, null, undefined, or false as valid title prop values would be preferable because it would force developers to be explicit about how they want to handle edge cases. e.g is the value undefined because the translation key for the title is missing? Since the tooltip title requires interaction to be shown, it's hard to spot for developers without the current invalid prop warning logic.

Now, if this issue is about keeping the prop-type error and keeping the TypeScript failure when a non-displayable title is provided, then 👍. Not showing the invalid title would lead to a better fallback UX for end-users and keep a good DX for developers when the title value goes wrong (can be identified before going to production).