使react-tooltip始终可见

Question

使react-tooltip始终可见

3

我有以下代码：

// 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始终可见，无论如何？

提前感谢您的帮助。

- altern

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- abhi patil · Accepted Answer

React 工具提示组件带有不同的属性，包括 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>