使用反應狀態使工具提示內容延遲

Question

我正在使用這個簡單的反應工具提示庫https://www.npmjs.com/package/react-simple-tooltip但我沒有選擇延遲顯示工具提示內容。 有什么想法可以用國家來控制它嗎？ 我可以想到 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

Answer 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