Sometimes, we want to conditionally activate a React Material UI tooltip.

In this article, we’ll look at how to conditionally activate a React Material UI tooltip.

How to conditionally activate a React Material UI tooltip?

To conditionally activate a React Material UI tooltip, we can set the title prop of the Tooltip to an empty string.

For instance, we write:

import * as React from "react";
import Tooltip from "@material-ui/core/Tooltip";
import Button from "@material-ui/core/Button";

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

export default function App() {
  return (
    <div>
      <MyButton text="hello world" />
      <MyButton text="" />
    </div>
  );
}

We create the MyButton component that takes the text prop.

And it renders a Tooltip with the Button to activate the tooltip.

Next, we render the MyButton component with text set to 'hello world' and another with text set to an empty string.

Only when we hover over the one with the text prop set to 'hello world' we’ll see the tooltip show with ‘hello world’.

When we hover over the 2nd one, we get nothing.

Conclusion

To conditionally activate a React Material UI tooltip, we can set the title prop of the Tooltip to an empty string.