score:3

You don't actually need to write a custom method for that, react-bootstrap has that built in. Check out the documentation: https://react-bootstrap.github.io/components.html#tooltips

You will have to put a <Tooltip/> element as an overlay prop in an OverlayTrigger.

var tooltip = <Tooltip />;
// ...
<OverlayTrigger placement="left" overlay={tooltip}>
  <td>Holy guacamole!</td>
</OverlayTrigger>

Or, if that breaks the layout:

var tooltip = <Tooltip />;
// ...

<td>
  <OverlayTrigger placement="left" overlay={tooltip}>
    Holy guacamole!
  </OverlayTrigger>
</td>

This code will have to be in the render() method. What you are doing right now is you just return a JSX element into nowhere, that's why the tooltip doesn't show up. It's not rendered or referenced properly in the render() method of your component.


Related Query

More Query from same tag