Warning: Prop `dangerouslySetInnerHTML` did not match.

[audn]

Hey!

This code,

   <ReactTooltip
      effect="solid"
      place="bottom"
      delayShow={200}
      arrowColor="transparent"
      backgroundColor="#1d2c3e"
      id="newApp"
   >
      <h1 className="text-sm text-white font-medium">Upload</h1>
   </ReactTooltip>

Seems to be giving me this:

I've tried to use <p> tags instead of <h1> and so on, but I can't seem to get rid of it. I do indeed have custom CSS on it, and it looks like this:

.__react_component_tooltip {
  border-radius: 5px !important;
  border: 1px solid #273552 !important;
  background: #404f6d !important;
  padding: 10px 15px !important;
  color: #b7c4dc !important;
  z-index: 100 !important;
}

[pmdpaula]

Same for me. It works, but I got this warning even if any option is passed.

[audn]

"Glad" to see that I'm not the only one!

I've googled around, but I couldn't find any posts on it. Seems like theres a lot of open issues in this repo as well.

[lipgartdmitriy]

This solution helped me. https://stackoverflow.com/questions/64079321/react-tooltip-and-next-js-ssr-issue

[pmdpaula]

This solution helped me. https://stackoverflow.com/questions/64079321/react-tooltip-and-next-js-ssr-issue

Thanks. It works for me. I use useEffect, bur I'll try the react-tidy package too.

[audn]

I can't seem to solve it, would you mind sharing your code here so I can try it out? @lipgartdmitriy

[LeonSkrilec]

I was having same problems with Next.js. I just imported component dynamically, with SSR disabled and it works.

import dynamic from "next/dynamic";

const ReactTooltip = dynamic(() => import("react-tooltip"), {
  ssr: false,
});

[amerllica]

Actually, @LeonSkrilec 's answer is correct, but what if the project won't based on next.js?

The good and native pure solution can be this SO link

[bonesoul]

same issue.

[hmmhmmhm]

@LeonSkrilec thanks you saved me 😃!!

[Oskku]

In case you are using any server-side rendering (like Next.js) - you will need to make sure your component is mounted first before showing the react-tooltip. I fixed this by using the following:

You should wrap your JSX in the following component:

import React, { useEffect, useState } from 'react';

const NoSsr = ({ children }): JSX.Element => { const [isMounted, setMount] = useState(false);

useEffect(() => { setMount(true); }, []);

return <>{isMounted ? children : null}</>; };

export default NoSsr; Like this:

[vhpoet]

This worked for me.

[ozdemircibaris]

Thanks Its works, cheers! @LeonSkrilec