如何在react-tooltip中设置工具提示的X轴位置跟随鼠标光标？

嘿，我完全懂你的困扰——之前直接把鼠标的XY坐标都传给position属性，结果把Y轴的默认定位也给覆盖了，对吧？你想要的是Y轴保持react-tooltip自带的逻辑（比如稳稳待在元素下方），但X轴跟着鼠标光标走，我给你两个实用的方案：

方案一：利用onBeforeShow回调动态调整位置 #

这个方法最贴合你的需求，它能保留react-tooltip默认的Y轴定位，只替换X轴为鼠标当前的坐标。核心是用onBeforeShow回调拿到tooltip自动计算的默认位置，再把X轴改成鼠标的X值：

import { useState } from 'react';
import { Tooltip } from 'react-tooltip';

function App() {
  const arr = Array.from({ length: 10 }, (_, i) => i);
  // 只存鼠标的X轴坐标
  const [mouseX, setMouseX] = useState(0);

  // 监听鼠标在元素上的移动，实时更新X轴
  const handleMouseMove = (event) => {
    setMouseX(event.pageX);
  };

  // 在tooltip显示前，替换X轴位置，保留默认Y轴
  const handleBeforeShow = (data) => {
    return {
      ...data.position, // 拿到react-tooltip自动计算的默认位置（含正确Y轴）
      x: mouseX // 替换成当前鼠标的X坐标
    };
  };

  return (
    <>
      <Tooltip
        id='tooltip'
        positionStrategy='fixed'
        onBeforeShow={handleBeforeShow}
        clickable
      />
      <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
        {arr.map((item) => (
          <div
            key={item}
            data-tooltip-id='tooltip'
            data-tooltip-content={`条目 ${item} 的提示内容`}
            onMouseMove={handleMouseMove}
            style={{ padding: '8px', border: '1px solid #eee' }}
          >
            列表条目 {item}
          </div>
        ))}
      </div>
    </>
  );
}

export default App;

为什么这么做？ #

• onMouseMove会实时监听鼠标在元素上的位置，确保X轴能跟着鼠标移动，而不是只在鼠标进入时固定一次
• onBeforeShow回调里的data.position是react-tooltip根据元素位置自动算出的最优Y轴位置（比如默认的元素下方），我们只替换X轴，完全不破坏原有定位逻辑

方案二：结合元素位置与鼠标偏移量 #

如果你想要X轴相对于元素的位置跟随鼠标，也可以直接计算鼠标在元素上的偏移，再手动组合位置：

import { useState } from 'react';
import { Tooltip } from 'react-tooltip';

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

  const handleMouseMove = (event) => {
    // 拿到元素的位置信息
    const elemRect = event.currentTarget.getBoundingClientRect();
    // 计算鼠标在元素上的X偏移
    const mouseOffsetX = event.clientX - elemRect.left;
    // Y轴用react-tooltip默认的元素下方位置（这里可以用elemRect.bottom直接设置，也可以留空让库自动算）
    setTooltipPosition({
      x: elemRect.left + mouseOffsetX, // X轴跟着鼠标偏移
      y: elemRect.bottom + 10 // 手动设置Y轴在元素下方10px，或者改成undefined让库自动算
    });
  };

  return (
    <>
      <Tooltip
        id='tooltip'
        positionStrategy='fixed'
        position={tooltipPosition}
        clickable
      />
      <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
        {arr.map((item) => (
          <div
            key={item}
            data-tooltip-id='tooltip'
            data-tooltip-content={`条目 ${item} 的提示内容`}
            onMouseMove={handleMouseMove}
            style={{ padding: '8px', border: '1px solid #eee' }}
          >
            列表条目 {item}
          </div>
        ))}
      </div>
    </>
  );
}

export default App;

小提醒 #

• 记得用onMouseMove而不是onMouseEnter，前者会在鼠标移动时实时更新位置，后者只触发一次，X轴不会跟着鼠标动
• 如果用positionStrategy='fixed'，tooltip的位置不会因为页面滚动而偏移，体验更好

备注：内容来源于stack exchange，提问作者user22971224