Reactjs 反应引导-工具提示未在OverlyTrigger中与img一起显示

我是个新手，我正在尝试在图像上显示工具提示

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

但当光标悬停在图像上时，什么也不会发生。 我没有错误，只是什么都没发生

编辑： 我在ChromeDevTools中看到，工具提示出现在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>

你好，世界！

谢谢

给你

类应用程序扩展了React.Component{
render（）{
报税表（<
ReactBootstrap.OverlyTrigger placement='top'
延迟={
{
节目：1000
}
}
覆盖={<
ReactBootstrap.Tooltip id=“Tooltip”>
这是一个示例文本<
/反应引导。工具提示>
} >
<
img width=“300px”
src=”https://cdn.pixabay.com/photo/2017/07/01/19/48/background-2462431_960_720.jpg" / >
<
/ReactBootstrap.OverlyTrigger>
)
}
}
ReactDOM.render（，
document.getElementById（'root'））
);

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

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

你好，世界！
使用此代码解决问题

.popover.arrow{
背景：透明！重要；
z指数：99；
宽度：0；
身高：0；
左边框：7px实心透明；
右边框：7px实心透明；
边框顶部：7px实心#c7c7c7；
底部：-7px；
}
我的问题的重复问题与此问题不同，他们可能的解决方案没有为我解决