如何配置react-tooltip始终可见，解决窗口缩放、滚动时自动消失问题

解决方案 #

你遇到的消失问题是react-tooltip默认内置了多种自动隐藏逻辑，按需关闭对应逻辑、强制控制显示状态即可解决，修改方法如下：

1. 给ReactTooltip组件添加强制显示、禁用自动隐藏的属性 #

如果使用的是v4版本的react-tooltip（和你当前引入方式匹配），添加以下属性：

• isOpen={true}：强制 tooltip 始终处于打开状态，忽略鼠标离开、窗口失焦等默认隐藏触发事件
• scrollHide={false}：禁止页面滚动时自动隐藏tooltip
• resizeHide={false}：禁止窗口大小变化时自动隐藏tooltip
• hideOnWindowBlur={false}：禁止浏览器窗口失焦时自动隐藏tooltip
• hideOnDocumentClick={false}：禁止点击页面空白处时自动隐藏tooltip

2. 调整Portal挂载节点与样式 #

确保你index.html里的#tooltip节点添加fixed定位、高优先级z-index，避免被其他元素遮挡或随页面滚动偏移，可以直接在html里加style：

<div id="tooltip" data-for="tooltipStep" data-tip="tooltipStep_1" style="position: fixed; z-index: 9999; top: 0; left: 0;"></div>

3. 优化位置更新逻辑 #

修改App.js里的useEffect，监听滚动、窗口 resize 事件，实时重新计算tooltip位置，避免位置偏移：

useEffect(() => {
    ReactTooltip.rebuild()
    // 滚动和窗口大小变化时重新渲染tooltip，保证位置正确
    const handleUpdate = () => ReactTooltip.rebuild()
    window.addEventListener('scroll', handleUpdate, true)
    window.addEventListener('resize', handleUpdate)
    return () => {
        window.removeEventListener('scroll', handleUpdate, true)
        window.removeEventListener('resize', handleUpdate)
    }
}, [])

4. 修改后的MyTooltip组件参考 #

import ReactTooltip from "react-tooltip";
import ReactDOM from "react-dom";
import React from "react";
import classes from './MyTooltip.module.css';

const MyTooltip = (props) => 
  <React.Fragment>
    {
      ReactDOM.createPortal(
        <div>
          <div className={classes.backdrop} />
          <ReactTooltip
            id={props.id}
            type="dark"
            place={props.place}
            className={classes.tooltip}
            // 新增以下属性
            isOpen={true}
            scrollHide={false}
            resizeHide={false}
            hideOnWindowBlur={false}
            hideOnDocumentClick={false}
          >
            <span>{props.text}</span>
          </ReactTooltip>
        </div>
      ,
      document.getElementById("tooltip")
    )}
  </React.Fragment>

export default MyTooltip;

如果是v5以上版本的react-tooltip，属性名略有差异，把isOpen换成open={true}，scrollHide换成closeOnScroll={false}，hideOnWindowBlur换成closeOnBlur={false}即可。

内容的提问来源于stack exchange，提问作者altern