如何在React中向选项卡添加工具提示？

Question

我一直在努力在工具栏上添加工具提示。我已经能够使用来自react-bootstrap的工具提示将它们添加到按钮，并且与以下代码段一样好，但是当我使用来自react-bootstrap的OverlayTrigger包装选项卡元素时，它会导致选项卡消失：

  <OverlayTrigger placement="bottom" overlay={<Tooltip id="tooltip">TooltipTest</Tooltip>}>
   <Button bsStyle="default">Test Button</Button>
  </OverlayTrigger>

我尝试使用react-bootstrap中的工具提示，reactToolTip fron react-tooltip和reactstrap中的工具提示，但所有这些都会导致选项卡消失或仅导致选项卡中的文本触发工具提示。

这是我的渲染功能：

render() {

    return (
      <Tabs activeKey={this.state.key} onSelect={this.handleSelect} id="controlled-tab-example">
        <Tab eventKey={1} title="Summary">Summary View</Tab>
        <Tab eventKey={2} title="All Trades">All Trades Report</Tab>
        <Tab eventKey={3} title="Reports">Reports</Tab>
        <Tab eventKey={4} title="Completeness - ABC Only">Completeness - ABC Only</Tab>
        <Tab eventKey={5} title="Completeness - DEF Only">Completeness - DEF Only</Tab>
        <Tab eventKey={6} title="Completeness - Matches">Completeness - Matches</Tab>
        <Tab eventKey={7} title="Unmatched">Unmatched</Tab>
        <Tab eventKey={8} title="Rejects">Rejects</Tab>
        <Tab eventKey={9} title="Amendments">Amendments</Tab>
        <Tab eventKey={10} title="Late Trades">Late Trades</Tab>
      </Tabs>
    );
  }