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已内置。请查看文档：{{3}}

您必须在<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()方法中正确呈现或引用。

React-bootstrap工具提示没有触发

1 个答案: