我目前使用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轴指定值。有办法做到这一点吗?
我现在的情况:
您的代码当前仅在进入元素时跟踪鼠标位置一次。因此工具提示的位置始终是鼠标进入的元素的边框。
您需要的是一些跟踪鼠标位置的逻辑。
为此,您可以使用一个钩子,将
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 事件。