javascript - 使用 react 状态设置工具提示内容延迟

我正在使用这个简单的 React 提示库 https://www.npmjs.com/package/react-simple-tooltip，但它没有选项让我对显示提示内容进行延迟。有办法通过 state 来控制吗？我想到可以用 setTimeout，但我无法将包装器和它的子元素分开

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

答案＃1

老实说，如果可能的话，我会选择一个可以开箱即用实现这个功能的提示工具库。但如果你想用 react-simple-tooltip 来实现，我能想到的唯一方法如下：

在你的 styles.css 中添加一个新的动画：

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

然后像这样将 customCss 添加到你的工具提示中：

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

成品解决方案可以在这里看到：https://codesandbox.io/s/thirsty-hypatia-oeh6kb?file=/src/App.js