使反应工具提示始终可见答案

【问题标题】：Make react-tooltip always visible使反应工具提示始终可见
【发布时间】：2021-11-19 05:17:37
【问题描述】：

我有以下代码：

// App.js
useEffect(() => {
    ReactTooltip.rebuild()
}, [])

// index.html
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="tooltip" data-for="tooltipStep" data-tip="tooltipStep_1"></div>
    <div id="root"></div>
  </body>

// MyTooltip.js
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}
          >
            <span>{props.text}</span>
          </ReactTooltip>
        </div>
      ,
      document.getElementById("tooltip")
    )}
  </React.Fragment>

export default MyTooltip;

问题是当我取消最大化浏览器窗口时，当光标位于浏览器窗口之外时，工具提示会消失。如果发生滚动，工具提示也会消失。我必须将光标指向导航栏，然后回到 web 应用程序，以便在滚动后再次显示工具提示。

无论如何，我怎样才能让 react-tooltip 始终可见？

提前致谢。

【问题讨论】：

标签： javascript reactjs react-tooltip

【解决方案1】：

React tooltip 带有不同的属性，包括scrollHide（默认为true）和resizeHide（默认为true）。

您可以将它们设置为 false；

<ReactTooltip
    id={props.id}
    type="dark"
    place={props.place}
    scrollHide={false}
    resizeHide={false}
    className={classes.tooltip}
>
    <span>{props.text}</span>
</ReactTooltip>

【讨论】：

我尝试采纳您的建议，但此案仍未解决：The problem is that when I unmaximize the browser window, tooltip disappears when cursor is positioned beyond the browser window。不过，工具提示现在不会在滚动时消失。
尝试设置可点击也！
可点击已设置，但不幸的是它没有帮助。