react-bootstrap: Tooltip doesn't show when OverlayTrigger child is a custom React component

When I place a custom React component inside an OverlayTrigger, it causes the tooltip to no longer display on mouse hover. Example:

function Avatar(props) {
  return (<img src={props.url} />);
}

<OverlayTrigger overlay={(<Tooltip id="hi">Hello, world!</Tooltip>)} placement="top">
  <Avatar url="http://i.imgur.com/cOkr6Um.gif" />
</OverlayTrigger>

Whereas the following does work:

<OverlayTrigger overlay={(<Tooltip id="hi">Hello, world!</Tooltip>)} placement="top">
  <img src="http://i.imgur.com/cOkr6Um.gif" />
</OverlayTrigger>

(react-bootstrap@v0.30.2)

About this issue

Original URL
State: closed
Created 8 years ago
Comments: 18 (2 by maintainers)

Most upvoted comments

An easy fix is to wrap your custom component in an extra div:

<OverlayTrigger overlay={(<Tooltip id="hi">Hello, world!</Tooltip>)} placement="top">
  <div> 
    <Avatar url="http://i.imgur.com/cOkr6Um.gif" />
  </div>
</OverlayTrigger>

+38

SachaG on May 16, 2017

@nielk

function Avatar({ url, ...props }) {
  return (<img {...props} src={url} />);
}

<OverlayTrigger overlay={(<Tooltip id="hi">Hello, world!</Tooltip>)} placement="top">
  <Avatar url="http://i.imgur.com/cOkr6Um.gif" />
</OverlayTrigger>

+18

jquense on Feb 9, 2017

This should probably be part of the docs?

+15

davidfurlong on May 4, 2017

you need to pass the props through to the DOM element. it’s not working because you are swallowing the event handlers in avatar

jquense on Sep 12, 2016

Thanks ! It works well, I’m my case, I only take onMouseOut and onMouseOver:

const MyComp = (props) => {
  return (
    <div onMouseOut={props.onMouseOut} onMouseOver={props.onMouseOver}>
    </div>
  )
}

<OverlayTrigger overlay={(<Tooltip id="hi">Hello, world!</Tooltip>)} placement="top">
  <MyComp />
</OverlayTrigger>

Thank for the work, very good project

nielk on Feb 9, 2017

How do you type ...rest for TS? It kind of seems to break having a clean component interface.

coler-j on Nov 23, 2022