React-bootstrap tooltip not firing

Question

I have a piece of code here which is supposed to display a tooltip when the user hovers over a td cell.

import { DropdownButton, Tooltip } from 'react-bootstrap';

...

$(e.currentTarget).parent().prev().hover(() => {
    this.showTooltip(tooltipContent);
});

...

showTooltip(tooltipContent) {
    console.log(tooltipContent);
    return (
        <Tooltip placement="top" className="in" id="tooltip-top">
            tooltipContent
        </Tooltip>
    );
}

The console.log is showing the right text, but the tooltip does not show, and there is no error in the console. Am I calling the component correctly? Please help!

UPDATE:

Based on 1 answer, I changed my code to this:

import { DropdownButton, OverlayTrigger, Tooltip } from 'react-bootstrap';

showTooltip(tooltipContent) {
    console.log(tooltipContent);
    const tooltip = <Tooltip />;
    return (
        <OverlayTrigger placement="top" overlay={tooltip}>
            <span>tooltipContent</span>
        </OverlayTrigger>
    );
}

The calling function is the same:

$(e.currentTarget).parent().prev().hover(() => {
    this.showTooltip(tooltipContent);
});

But I still don't see any tooltip..

Answer 1

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.