React Material UI Tooltips Disable Animation

Question

I'm using React Material UI's Tooltip Component in my React application.

import Tooltip from "@material-ui/core/Tooltip";
...
...
<Tooltip title="Add" arrow>
    <Button>Arrow</Button>
</Tooltip>
...
...

I want to disable the entry and exit animations. How can I achieve this in the latest version

Answer 1

You can use the TransitionComponent and the TransitionProps to solve this.

Use the Fade Transition component with timeout: 0 as the properties for the transition component:

import Tooltip from "@material-ui/core/Tooltip";
import Fade from "@material-ui/core/Fade";
...
<Tooltip
    title="Add"
    arrow
    TransitionComponent={Fade}
    TransitionProps={{ timeout: 0 }}
>
    <Button>Arrow</Button>
</Tooltip>