标签: react-tooltip

我在登录页面上使用了react-tooltip，并将工具提示设置为在鼠标单击时触发。但我想当鼠标离开元素时工具提示消失。我找不到办法做到这一点。

我希望上面显示的工具提示在鼠标离开元素时删除。

这是我使用的 npm 包。https://www.npmjs.com/package/react-tooltip

react-tooltip 很棒，但我遇到了条件渲染组件的问题。

我有一个刷新图标，只显示什么时候props.refreshImages是true：

顶栏.js

import React from 'react'

export default function Topbar (props) {
  return (
    <div>
      {props.refreshImages && 
      <i data-tip="Refresh the images" className="fas fa-sync-alt" ></i>}
    </div>
  )
}

应用程序.js

import React from 'react'
import Topbar from './Topbar'
import ReactTooltip from 'react-tooltip'

export default function App() {
  return (
    <ReactTooltip />
    <Topbar refreshImages={true}/>
  )
}

简化的例子。但是当刷新图标被隐藏并再次显示时（props.refreshImages是false然后true），工具提示不会显示。

我已经尝试<ReactTooltip />进入Topbar.js并在每次渲染时运行ReactTooltip.rebuild()，但都没有奏效。因为props.refreshImages我实际上在使用 Redux。

在此先感谢您的帮助。

这里有点奇怪。我的网站实际上已经完成，只有一个问题。我已经实现了工具提示，但它们仅在刷新页面后才会显示！这是重现该问题的 GIF：

https://i.imgur.com/NbHyN77.mp4

该包来自 NPM，链接如下：https ://www.npmjs.com/package/react-tooltip

我已经浏览了他们的文档、故障排除和 github 存储库上报告的问题，但没有任何内容描述我的问题。该网站位于： https: //ezekias1337.github.io/Burning-Crusade-Talent-Calculator/#/

奇怪的是，如果我为其中一条路线添加书签并将其加载到新选项卡中，它会第一次加载。仅当我从图标中选择组件时才会出现此问题。

我确保从“react-tooltip”导入ReactTooltip；我还在每个组件的底部和 app.js 中添加了。添加 data-for 属性并没有解决问题。

这是我的 App.js 的代码：

import ReactTooltip from 'react-tooltip';

class App extends Component {
  
  
    render() {
      return (
          <div className="App">
                            <CustomNavbar />
              <ClassSelector />
              
              <FooterComponent />
              <ReactTooltip 
                html={true}
              />
          </div>
      );
  }
}

export default App;

以下是与每个组件中的工具提示相关的代码：

a.) 具有工具提示的图像（每个图像都有唯一的工具提示）

<img
                  onMouseEnter={this.displayMouseOverlayInnerElement}
                  onMouseLeave={this.hideMouseOverlayInnerElement}
                  onMouseDown={() => {
                    this.talentClick();
                    this.toolTipFunction();
                  }}
                  onTouchEnd={this.talentClick}
                  className="talentHover"
                  src={overlayImage}
                  style={{ display: "none" }}
                  data-tip={Hunter[0].toolTip[0]}
                  id="1"
                />

b.) 组件底部

<ReactTooltip data-html="true" />

知道我能做些什么来解决这个问题吗？