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/> 元素作为overlay 属性放入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() 方法中正确呈现或引用。