0

我有以下代码：

// 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;

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

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

提前致谢。

4

1 回答 1

3

React 工具提示带有不同的属性，包括scrollHide(default is true) 和resizeHide(default is true)。

您可以将它们设置为 false；

<ReactTooltip
    id={props.id}
    type="dark"
    place={props.place}
    scrollHide={false}
    resizeHide={false}
    className={classes.tooltip}
>
    <span>{props.text}</span>
</ReactTooltip>
于 2021-11-18T12:02:45.500 回答