React Bootstrap - 工具提示未在 OverlayTrigger 中显示 img答案

【问题标题】：React Bootstrap - Tooltip not showing with img in OverlayTriggerReact Bootstrap - 工具提示未在 OverlayTrigger 中显示 img
【发布时间】：2018-11-28 13:58:32
【问题描述】：

我对反应有点陌生，我正在尝试在图像上显示工具提示。

        <OverlayTrigger placement="right" overlay={(<Tooltip id="hi">Hello, world!</Tooltip>)} triggerType="hover">
            <img alt="" className="char-img rotate_m_5" src="/images/characters/wolf_xs.png"/>
        </OverlayTrigger>

但是当光标悬停在图像上时没有任何反应。我没有错误只是没有发生任何事情

编辑：我在 Chrome DevTools 中看到工具提示出现在 HTML 中但没有出现在应用程序中，可能是 CSS 问题。

<div id="hi" role="tooltip" class="fade in tooltip top" style="top: 313.75px; left: 448.039px;"><div class="tooltip-arrow" style="left: 50%;"></div><div class="tooltip-inner">Hello, world!</div></div>

谢谢

【问题讨论】：

stackoverflow.com/questions/36875266/…的重复问题
我的问题与这个不同，他们可能的解决方案并没有为我解决

标签： reactjs tooltip react-bootstrap

【解决方案1】：

给你

class App extends React.Component {
  render() {
    return ( <
      ReactBootstrap.OverlayTrigger placement = 'top'
      delay = {
        {
          show: 1000
        }
      }
      overlay = { <
        ReactBootstrap.Tooltip id = "tooltip" >
        This is a sample text <
        /ReactBootstrap.Tooltip>
      } >
      <
      img width = "300px"
      src = "https://cdn.pixabay.com/photo/2017/07/01/19/48/background-2462431_960_720.jpg" / >
      <
      /ReactBootstrap.OverlayTrigger>
    )
  }
}

ReactDOM.render( < App / > ,
  document.getElementById('root')
);

<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js" crossorigin></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css" crossorigin="anonymous">

<div id="root" />

【讨论】：

【解决方案2】：

需要在工具提示中添加 CSS 类“show”

<Tooltip id="hi" className="show">Hello World!</Tooltip>

【讨论】：

【解决方案3】：

使用此代码问题解决

.popover .arrow {
            background: transparent !important;
            z-index: 99;
            width: 0; 
            height: 0; 
            border-left: 7px solid transparent;
            border-right: 7px solid transparent;
            border-top: 7px solid #c7c7c7;
            bottom: -7px;
}

【讨论】：