Conditionally activate Material UI tooltip?

Question

I have the following React component using Material UI:

const MyButton = ({ warningText }) => (
    <Tooltip title={warningText}>
        <Button>Do action</Button>
    </Tooltip>
)

Currently, this shows an empty tooltip when warningText is undefined. Instead I would like to show no tooltip at all. Is there a way to conditionally surpress the tooltip in these cases?

Off course I could just use an if statement to not render the tooltip component, but this would lead to rather ugly code in my opinion.

score 108 · Accepted Answer · answered Dec 03 '18 at 10:31

108

Should be

 <Tooltip title={warningText == null ? "" : warningText}>
        <Button>Do action</Button>
 </Tooltip>

the docs say that it won't be displayed if the string length is zero.

https://material-ui.com/api/tooltip/

Tooltip title. Zero-length titles string are never displayed.

answered Dec 03 '18 at 10:31

Murat Karagöz

35,401
16
78
107

2

It is worth noting that React now throws a warning if you pass `null` to the `title` prop on Tooltip. You can pass an empty string `''` instead to achieve the same result. `Warning: Failed prop type: The prop 'title' is marked as required in 'ForwardRef(Tooltip)', but its value is `null`.` – Andrew Hill Dec 31 '19 at 16:35
3

A zero-length title still shows a tooltip.. it's just small and looks like a programming error. – lowcrawler May 28 '21 at 18:53
1

@lowcrawler an actual zero length string like `""` or `''` will not display the tooltip. Only when passing `false` or `null` the empty tooltip is visible. – KiwiKilian Jun 15 '21 at 08:53
1

This is my state -> { currentItem: { placed: "" } }. Have used tooltip as suggested: . Zero length still shows tooltip. Displays tooltip as programming error as @lowcrawler was mentioning. – Sarahrb Feb 10 '22 at 06:50
1

@Sarahrb Check KiwiKilian's comment. 'false' or 'null' shows the empty tooltip, but a zero-length string will not. – lowcrawler Feb 10 '22 at 18:14
Thank you, I noticed. In my case "currentItem.placed" returns zero length string, still empty tool tip is shown. – Sarahrb Feb 10 '22 at 18:42

somangoi · Answer 2 · 2023-05-04T03:32:52.723

3

You can use the props called disableHoverListener.

ref: https://mui.com/material-ui/api/tooltip/#:~:text=disableHoverListener

edited May 04 '23 at 03:32

answered May 04 '23 at 03:32

somangoi

31
2

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community May 04 '23 at 12:12
While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - [From Review](/review/late-answers/34329165) – Lajos Arpad May 07 '23 at 01:03

Mayer Spitz · Answer 3 · 2022-12-18T17:11:20.547

0

If you're looking to manually play around for customization, you can try to use the following solution:

As per the documentation, you can use the open prop and mouse events to handle it manually.

In the following scenario, we will use state to set showing the tooltip when we enter the mouse over the element, and we will also use text && to assert that text has a value, this will prevent the tooltip from showing when text is undefined.

const [showTooltip, setShowTooltip] = useState(false);
<Tooltip
    open={text && showTooltip}        
    onMouseEnter={() => { setShowTooltip(true) }}
    onMouseLeave={() => { setShowTooltip(false) }}
    placement="top" title={text}
>
    <div>
        {text}
    </div>
</Tooltip>

Note, the mui-tooltip is not a perfect component to begin with and is not very straight forward, this solution works for me but might not work in your situation as is, I will try to put it out, you can try to make it work on your end.

If it doesn't work for you, please leave a comment and I'll try to help.

edited Dec 18 '22 at 17:11

answered Jan 13 '22 at 23:49

Mayer Spitz

2,577
1
20
26

1

How does this prevent the tooltip from showing when `text` is undefined? – Anders Jan 14 '22 at 09:08
Just add `&& text` to the `open` `prop`. I mainly wanted to point out that you can handle it manually, but now as you asked I updated the post to answer your question. – Mayer Spitz Jan 14 '22 at 18:02
You can as well handle it in a different way, such as checking `&& text` when you set the `state` at the `onMouseEnter` `event`, like `setShowTooltip(true && text)`. – Mayer Spitz Jan 14 '22 at 18:03
@MayerSpits Not my downvote, but I would say it is a more complicated solution than the accepted answer without any clear benefit. By "taking control" of the open property, you have to take over a lot of the job the Tooltip component provides. For instance, what happends when the component recieves focus? – Anders Jan 20 '22 at 10:38
Thanks @Anders for the comment. You're right, manually handling would be a benefit when you're particularly looking for customization. I updated the title of my post on this. – Mayer Spitz Jan 20 '22 at 14:25

score -4 · Answer 4 · edited Dec 03 '18 at 11:14

-4

You should take a look at https://material-ui.com/api/tooltip/

There are options like

disableFocusListener
disableHoverListener
disableTouchListener
interactive

I think interactive={true} should fit your needs best

<Tooltip title={warningText} interactive={!warningText}>...</Tooltip>

edited Dec 03 '18 at 11:14

Anders

8,307
9
56
88

answered Dec 03 '18 at 10:30

Ben Ammann

404
4
12

2

The `interactive` property makes the tooltip stay visible longer, so it is not related. The three `disable...` properties could be used, but problems would arise if the tooltip is visible when the warning text changes. The event to hide it may not register. – Anders Dec 03 '18 at 11:15

Conditionally activate Material UI tooltip?

4 Answers4

Linked