当鼠标离开时，React-tooltip 不会关闭

Question

我在登录页面上使用了react-tooltip，并将工具提示设置为在鼠标单击时触发。但我想当鼠标离开元素时工具提示消失。我找不到办法做到这一点。

我希望上面显示的工具提示在鼠标离开元素时删除。

这是我使用的 npm 包。https://www.npmjs.com/package/react-tooltip

Answer 1

将我的应用程序升级到 React 18 后，我遇到了这个问题。

看起来该包react-tooltip还不支持 React 18。

作为解决方法，您可以执行此操作，直到更新包为止。

const [tooltip, showTooltip] = useState(true);

<>
 {tooltip && <ReactTooltip effect="solid" />}
 <p
   data-tip="hello world"
   onMouseEnter={() => showTooltip(true)}
   onMouseLeave={() => {
     showTooltip(false);
     setTimeout(() => showTooltip(true), 50);
   }}
 />
</>

Answer 2

您可以在react-tooltip GitHub存储库data-event-off上阅读有关设置隐藏工具提示的自定义事件的属性的信息。 这些示例可能对您的情况有用。