React Material UI Tooltips Disable Animation

问题

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

回答1:

Just disable/mock the transition component. ie: render automatically the children like this:

const FakeTransitionComponent = ({ children }) => children;

<Tooltip
  title="tooltip title"
  TransitionComponent={FakeTransitionComponent}
  // or TransitionComponent={({ children}) => children}
>
  <h1>Hello CodeSandbox</h1>
</Tooltip>

Here is a codesandbox demo

回答2:

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>

来源：https://stackoverflow.com/questions/61139778/react-material-ui-tooltips-disable-animation