javascript - 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 Prop 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() 中未正确呈现或引用它组件的方法。