make tooltip content delay using react state

Question

I'm using this simple react tooltip library https://www.npmjs.com/package/react-simple-tooltip but it has no option for me to do delay to show tooltip content. Any idea to control it with the state? I can think of setTimeout but I can't separate the wrapper and its children

import Tooltip from "react-simple-tooltip";

export default function App() {
  return (
    <div className="App">
      <br />
      <br />
      <br />
      <br />
      <br />
      <Tooltip content="tooltip content">hover me</Tooltip>
    </div>
  );
}

https://codesandbox.io/s/priceless-christian-n2c0u8?file=/src/App.js:0-280

Answer 1

Honestly, I would choose a tooltip library that can do it out of the box if possible. But if you want to do it with react-simple-tooltip, the only way I can see it can be done is like below:

In your styles.css add a new animation:

@keyframes show {
  0% {
    opacity: 0;
  }
  90% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

Then add customCss to your tooltip like this:

  <Tooltip
    content="tooltip content2"
    customCss="
      & div {
        animation: show 1000ms linear 0s 1
      }
    ">
    hover me
  </Tooltip>

The finished solution can be seen here: https://codesandbox.io/s/thirsty-hypatia-oeh6kb?file=/src/App.js