React-bootstrap 工具提示未触发

Question

我在这里有一段代码，当用户将鼠标悬停在 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>
    );
}

console.log 显示正确的文本，但工具提示没有显示，并且控制台中没有错误。我是否正确调用了组件？请帮忙！

更新：

基于 1 个答案，我将代码更改为：

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

调用函数是一样的：

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

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

Answer 1

您实际上不需要为此编写自定义方法，react-bootstrap 已内置该方法。查看文档：https ://react-bootstrap.github.io/components.html#tooltips

您必须将一个<Tooltip/>元素作为overlayprop 放入OverlayTrigger.

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>

该代码必须位于render()方法中。您现在所做的只是return一个 JSX 元素，这就是工具提示不显示的原因。它没有在render()组件的方法中正确呈现或引用。