Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Tooltip doesn't show when OverlayTrigger child is a custom React component

See original GitHub issue

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)

Issue Analytics

State:
Created 7 years ago
Comments:18 (2 by maintainers)

Top GitHub Comments

34reactions

SachaGcommented, May 16, 2017

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>

18reactions

jquensecommented, Feb 9, 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>

Top Results From Across the Web

OverlayTrigger on custom component not working

I finally found a solution here: https://github.com/react-bootstrap ... Your custom component needs to pass the event handler props through.

Overlays | React-Bootstrap

The <Tooltip> and <Popover> components do not position themselves. Instead the <Overlay> (or <OverlayTrigger> ) components, inject ref and style props.

Tooltips | Trimble Modus React Bootstrap Developer Guide

Overview. The <Tooltip> component do not position itself. Instead the <Overlay> (or <OverlayTrigger> ) components, inject ref and style props.

[Solved]-React Bootstrap hide tooltip-Reactjs

React bootstrap Tooltip throws error 'React.Children.only expected to receive a single React element child.' ... How to position and resize React Bootstrap ...

React-Bootstrap OverlayTrigger Component - GeeksforGeeks

We can use the following approach in ReactJS to use the react-bootstrap OverlayTrigger Component. OverlayTrigger Props: children: It is used to ...