Search code examples
reactjstooltipreact-bootstrap

React Bootstrap - Tooltip not showing with img in OverlayTrigger

I'm kinda new to react and I'm trying to display a tooltip on an image.

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

But nothing happens when the cursor hovers the image. I have no errors just nothing happens

Edit : I saw in Chrome DevTools that the tooltip appears in the HTML but not in the app, might be a CSS issue.

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

Thanks

Solution

  • Need to add the CSS class "show" to the tooltip

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