工具提示未隐藏在 react-tooltip 组件中

Question

我正在使用 react-tooltip 在我的 React 网站上呈现 ReactTooltip 组件。但是当我将光标从 ReactTooltip 组件移开时，工具提示内容不会自动隐藏，如图所示。

以下是导入：

import React, { useState, useEffect } from "react";
import ReactTooltip from "react-tooltip";
import { motion } from "framer-motion";
import { AppWrap, MotionWrap } from "../../wrapper";
import { urlFor, client } from "../../client";

显示工具提示组件的代码：

<motion.div className="app__skills-exp-works">
{experience.works.map((work) => (
  <div key={work.name}>
    <motion.div
      whileInView={{ opacity: [0, 1] }}
      transition={{ duration: 0.5 }}
      className="app__skills-exp-work"
      data-tip
      data-for={work.name}
    >
      <h4 className="bold-text ">{work.name}</h4>
      <p className="p-text">{work.company}</p>
    </motion.div>

    <ReactTooltip
      id={work.name}
      effect="solid"
      arrowColor="#fff"
      className="skills-tooltip"
    >
      {work.desc}
    </ReactTooltip>
  </div>
))}
</motion.div>

技能工具提示 class 样式：

.skills-tooltip {
  max-width: 300px !important;
  background-color: var(--white-color) !important;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.1) !important;
  border-radius: 5px !important;
  padding: 1rem !important;
  color: var(--gray-color) !important;
  text-align: center !important;
  line-height: 1.5 !important;
  opacity: 1 !important;

  @media screen and (min-width: 2000px) {
    font-size: 1.75rem !important;
    max-width: 500px !important;
    line-height: 2 !important;
  }
}

Answer 1

这是由 bug in react-tooltip 引起的。这是一个产生相同错误的沙箱：

https://codesandbox.io/s/gallant-ully-gxqgr0?file=/src/App.js

工具提示未隐藏在 react-tooltip 组件中

Tooltip is not hiding in react-tooltip component

javascript

reactjs

react-tooltip