在 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 過渡是更好的選擇