Javascript 反应引导工具提示未触发

我这里有一段代码，当用户将鼠标悬停在td单元格上时，应该会显示一个工具提示

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>
    );
}

---

但是我仍然没有看到任何工具提示。

您实际上不需要为此编写自定义方法，react bootstrap内置了该方法。查看文档：

您必须将

元素作为

覆盖

道具放置在

覆盖装配机中

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

var工具提示=；
// ...
神圣的鳄梨酱！

或者，如果这破坏了布局：

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

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

var工具提示=；
// ...
神圣的鳄梨酱！

---

此代码必须位于

render（）

方法中。您现在正在做的是

将一个JSX元素返回到任何地方，这就是工具提示没有显示的原因。组件的
render（）
方法中未正确呈现或引用它。
更新了我的答案。您正试图在
showTooltip（）
函数中呈现您实际上不需要的内容。我明白了。是的，我可以删除函数…渲染方法才是真正的问题。。。
var tooltip = <Tooltip />;
// ...
<OverlayTrigger placement="left" overlay={tooltip}>
  <td>Holy guacamole!</td>
</OverlayTrigger>

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

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