title: React Bootstrap OverlayTrigger and Tooltip error
body: <p>I am trying to use react-bootstrap OverlayTrigger and Tooltip inside of a formatter for react-bootstrap-table and keep getting the following error:</p>
  <blockquote>
  <p>OverlayTrigger's only required prop is overlay which is supposed to be a node and Tooltip's only required prop is id (despite none of their examples showing that you need an ID) which needs to be a string.</p>
  <p>&quot;onlyChild must be passed a children with exactly one child.&quot;</p>
  </blockquote>
  <p>The relevant code looks like:</p>
  <pre><code>import {Button, DropdownButton, MenuItem, Modal,
      OverlayTrigger, Tooltip} from 'react-bootstrap';
  
  ....
  
  const submitterFormatter = (submitter, row) =&gt; {
    return (
      &lt;OverlayTrigger placement=&quot;bottom&quot; overlay={toolTipComponent(submitter, row)}&gt;
        {submitter}
      &lt;/OverlayTrigger&gt;
    );
  };
  
  const toolTipComponent = (toolTipText, row) =&gt; {
    return (
      &lt;Tooltip id={String(row.id)}&gt;
        {toolTipText}
      &lt;/Tooltip&gt;
    );
  };
  </code></pre>
  <p>I have also tried the following for submitterFormatter</p>
  <pre><code>const submitterFormatter = (submitter, row) =&gt; {
    return (
      const toolTipInstance = toolTipComponent(submitter, row);
      &lt;OverlayTrigger placement=&quot;bottom&quot; overlay={toolTipInstance}&gt;
        {submitter}
      &lt;/OverlayTrigger&gt;
    );
  };
  </code></pre>