javascript - 在 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)
};

Here是一个codesandbox，可以满足您的需要。

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