在 React 中创建悬停工具提示

Question

我制作了一个工具提示，当我将鼠标悬停在一个元素上时会出现该提示，并显示产品的全名productName 。

<div
  className="product-select-info"
  onMouseEnter={e => productNameHandleHover(e)}
  onMouseLeave={productNameHandleNoHover}
>
  {productName}
  <div
    className="tooltip"
    style={{
      display: isTooltipShown ? "block" : "none",
      top: mouseLocation.y,
      left: mouseLocation.x,
    }}
  >
    {productName}
  </div>
</div>

这是我的处理程序：

const productNameHandleHover = (event: any): void => {
  setmouseLocation({
    x: event.pageX,
    y: event.pageY,
  });
  setisTooltipShown(true);
};

const productNameHandleNoHover = (): void => {
  setisTooltipShown(false);
};

我的问题是，我只想在 0.5 秒后显示工具提示。 目前，只要鼠标移过 div 就会出现工具提示。 我如何实现这一目标？ 我尝试使用setTimeout但我只是遇到了问题。

Answer 1

正如 ritaj 在评论中提到的那样，最好使用 css 转换。

但是，如果您绝对想要 javascript 实现，则每当您将鼠标悬停在元素上时，请将类变量设置为 true。

const productNameHandleHover = (event: any): void => {
  this.hovering = true;
  ...
}

并在没有时将其设置为 false。

const productNameHandleNoHover = (): void => {
  this.hovering = false;
  setisTooltipShown(false);
};

当您实际设置工具提示时，请检查您的类变量是否已设置。

const productNameHandleHover = (event: any): void => {
  this.hovering = true;
  setmouseLocation({
    x: event.pageX,
    y: event.pageY,
  });
  setTimeout(() => {
    if (this.hovering) {
      setisTooltipShown(true);
    }
  }, 500)
};

这是一个代码沙盒，可以满足您的需求。

但是你已经可以看到你必须付出的努力。所以回到原点。 使用 css 过渡是更好的选择