文章/答案/技术大牛

发布

社区首页 >问答首页 >使react-工具提示始终可见

问使react-工具提示始终可见
EN

Stack Overflow用户

提问于 2021-11-18 11:45:01

回答 1查看 243关注 0票数 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在任何情况下都是可见的？

提前谢谢。

reactjs

react-tooltip

javascript

回答 1

Stack Overflow用户

发布于 2021-11-18 12:02:46

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>

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/70019275

复制

相似问题

问使react-工具提示始终可见
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使react-工具提示始终可见EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使react-工具提示始终可见
EN