React-bootstrap工具提示未触发
React-bootstrap工具提示未触发
提问于 2016-10-09 19:30:40
我这里有一段代码，当用户将鼠标悬停在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);
});但是我仍然没有看到任何工具提示..
回答 1
Stack Overflow用户
发布于 2016-10-09 19:42:46
你实际上不需要为此编写一个自定义方法，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()方法中。您现在所做的就是将一个JSX元素return到任何地方，这就是工具提示没有出现的原因。它没有在组件的render()方法中正确呈现或引用。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39943084
复制相关文章
相似问题
腾讯云开发者
