title: How can I add tooltips to tabs in react?
body: <p>I have been struggling to add tooltips to tabs in react. I have been able to add them to buttons just fine with the following snippet using Tooltip from react-bootstrap but when I wrap a tab element with OverlayTrigger from react-bootstrap it causes the tab to disappear:</p>
  
  <pre><code>  &lt;OverlayTrigger placement="bottom" overlay={&lt;Tooltip id="tooltip"&gt;TooltipTest&lt;/Tooltip&gt;}&gt;
     &lt;Button bsStyle="default"&gt;Test Button&lt;/Button&gt;
    &lt;/OverlayTrigger&gt;
  </code></pre>
  
  <p>I have attempted to use the Tooltip from react-bootstrap, ReactToolTip fron react-tooltip and Tooltip from reactstrap but all either cause the tab to disappear or only cause the text within the tab to trigger the tooltip.</p>
  
  <p>Here is my render function:</p>
  
  <pre><code>render() {
  
      return (
        &lt;Tabs activeKey={this.state.key} onSelect={this.handleSelect} id="controlled-tab-example"&gt;
          &lt;Tab eventKey={1} title="Summary"&gt;Summary View&lt;/Tab&gt;
          &lt;Tab eventKey={2} title="All Trades"&gt;All Trades Report&lt;/Tab&gt;
          &lt;Tab eventKey={3} title="Reports"&gt;Reports&lt;/Tab&gt;
          &lt;Tab eventKey={4} title="Completeness - ABC Only"&gt;Completeness - ABC Only&lt;/Tab&gt;
          &lt;Tab eventKey={5} title="Completeness - DEF Only"&gt;Completeness - DEF Only&lt;/Tab&gt;
          &lt;Tab eventKey={6} title="Completeness - Matches"&gt;Completeness - Matches&lt;/Tab&gt;
          &lt;Tab eventKey={7} title="Unmatched"&gt;Unmatched&lt;/Tab&gt;
          &lt;Tab eventKey={8} title="Rejects"&gt;Rejects&lt;/Tab&gt;
          &lt;Tab eventKey={9} title="Amendments"&gt;Amendments&lt;/Tab&gt;
          &lt;Tab eventKey={10} title="Late Trades"&gt;Late Trades&lt;/Tab&gt;
        &lt;/Tabs&gt;
      );
    }
  </code></pre>