React Material UI Tooltips Disable Animation - reactjs

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>

Answer 2

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

Answer 3

I've used Incepter's solution, that is clean. If anyone is looking for a TypeScript solution here it is.
const FakeTransitionComponent = React.forwardRef<
HTMLDivElement,
TransitionProps & { children?: React.ReactElement<any, any> }
>(
(
{
appear,
onEnter,
onEntered,
onEntering,
onExit,
onExited,
onExiting,
...props
},
ref
) => {
props.in = undefined;
return <div {...props} ref={ref}></div>;
}
);
TransitionProps are not passed to the wrapper element, because they would all cause React warnings.

Answer 4

You can just pass React.Fragment as TransitionComponent
<Tooltip
title="tooltip title"
TransitionComponent={React.Fragment}
>
<h1>Hello CodeSandbox</h1>
</Tooltip>

Answer 5

Best option is to create a simple NoTransition component:
export const NoTransition = React.forwardRef<
React.ReactFragment,
TransitionProps
// eslint-disable-next-line #typescript-eslint/no-unused-vars
>(({ children }, ref) => {
return <>{ children }</>;
});
And do TransitionComponent={ NoTransition }.
Also, do not omit the ref param or you will get a warning too:
Warning: forwardRef render functions accept exactly two parameters: props and ref. Did you forget to use the ref parameter?
Just adding TransitionProps={{ timeout: 0 }}, without setting TransitionComponent, will also work, but there's no need to render the default TransitionComponent in that case.
Some of the options proposed in other answers will throw errors or warnings:
Doing TransitionComponent={ Fragment } will result in the following warning:
Warning: Invalid prop appear supplied to React.Fragment. React.Fragment can only have key and children props.
Doing TransitionComponent={ ({ children }) => children } will result in this other warnings (might change a bit depending if you are using a Tooltip, Modal or other component):
Warning: Failed prop type: Invalid prop children supplied to ForwardRef(Modal). Expected an element that can hold a ref. Did you accidentally use a plain function component for an element instead? For more information see https://mui.com/r/caveat-with-refs-guide
Warning: Failed prop type: Invalid prop children supplied to ForwardRef(ModalUnstyled). Expected an element that can hold a ref. Did you accidentally use a plain function component for an element instead? For more information see https://mui.com/r/caveat-with-refs-guide
Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()? Check the render method of Unstable_TrapFocus.
And potentially also this error:
Uncaught Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
I'm using "#mui/material": "^5.5.2".