CODEWITHSUNDEEP
reactjsmaterial-ui
Divyansh Goenka
Divyansh Goenka

Reputation: 1104

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

Upvotes: 6

Views: 7767

Answers (5)

Danziger
Danziger

Reputation: 21191

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".

Upvotes: 1

BoltCoder
BoltCoder

Reputation: 194

You can just pass React.Fragment as TransitionComponent

<Tooltip
  title="tooltip title"
  TransitionComponent={React.Fragment}

>
  <h1>Hello CodeSandbox</h1>
</Tooltip>

Upvotes: 1

hbendev
hbendev

Reputation: 79

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.

Upvotes: 2

Incepter
Incepter

Reputation: 2968

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

Upvotes: 4

Dekel
Dekel

Reputation: 62676

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>

Upvotes: 8

Related Questions