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/>元素作为OverlayTrigger的overlay道具。

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 元素return到任何地方，这就是工具提示不显示的原因。 它没有在组件的render()方法中正确呈现或引用。