如何在react-tooltip中定位鼠标光标下的x位置？

Question

我目前使用react-tooltip库实现了工具提示。
这里的问题是工具提示必须位于鼠标光标下方，而不是元素的起始点。
我使用了位置选项，但这对我不起作用，因为我必须无条件使用 y 轴。
你知道如何使用react-tooltip中应用的值作为y轴并仅指定x轴值吗？

function App() {
  const arr = Array.from({ length: 10 }, (_, i) => i);
  const [tooltipPosition, setTooltipPosition] = useState({ x: 0, y: 0 });

  const handleMouseEnter = (event) => {
    const { pageX, pageY } = event;
    setTooltipPosition({ x: pageX, y: pageY });
  };

  return (
    <>
      <Tooltip
        id='tooltip'
        positionStrategy='fixed'
        position={tooltipPosition}
        clickable
      />
      <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
        {arr.map((item) => (
          <div
            data-tooltip-id='tooltip'
            data-tooltip-content='Hello world!'
            data-tooltip-place='bottom-start'
            onMouseEnter={handleMouseEnter}
            style={{ width: '100vw', height: '100px', backgroundColor: 'gray' }}
          />
        ))}
      </div>
    </>
  );
}

这样应用时，工具提示应该朝上，但问题是它朝下。因此，我想为y轴设置react-tooltip中指定的值，而只为x轴指定值。有办法做到这一点吗？

我现在的情况：

Answer 1

您的代码当前仅在进入元素时跟踪鼠标位置一次。因此工具提示的位置始终是鼠标进入的元素的边框。

您需要的是一些跟踪鼠标位置的逻辑。

为此，您可以使用一个钩子，将

mousemove

事件的事件侦听器添加到应用程序的

window

对象。

检查此答案是否有类似的问题：在 React 和 jQuery 中获取鼠标坐标

将该答案中的信息应用到您的代码中，您最终会得到以下结果：

function App() {
  const arr = Array.from({ length: 10 }, (_, i) => i);
  const [tooltipPosition, setTooltipPosition] = useState({ x: 0, y: 0 });

  const handleMouseEnter = (event) => {
    const { pageX, pageY } = event;
    setTooltipPosition({ x: pageX, y: pageY });
  };


  _onMouseMove(e) {
     const { screenX, screenY } = event;
     setTooltipPosition({ x: screenX, y: screenY });
  }

  return (
    <>
      <Tooltip
        id='tooltip'
        positionStrategy='fixed'
        position={tooltipPosition}
        clickable
      />
      <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
        {arr.map((item) => (
          <div
            data-tooltip-id='tooltip'
            data-tooltip-content='Hello world!'
            data-tooltip-place='bottom-start'
            onMouseMove={this._onMouseMove.bind(this)}
            style={{ width: '100vw', height: '100px', backgroundColor: 'gray' }}
          />
        ))}
      </div>
    </>
  );
}

只要用户将鼠标悬停在元素上，此代码将允许更新工具提示位置。

不过，当用户不再将鼠标悬停在元素上时，您可能需要添加一些代码来隐藏工具提示，但由于问题并不集中于此，所以我没有为其添加逻辑。如果您想做类似的事情，请查看 MDN - mouseleave 事件。