title: How to make react bootstrap tooltip to fit into container?
body: <p>I am making a simple react app for which I am using react-bootstrap. Here I am trying to display a very very simple tooltip using <code>OverlayTrigger</code> like,</p>
  
  <pre><code>    &lt;OverlayTrigger
        placement="bottom"
        overlay={
          &lt;Tooltip id="tooltip" style={{ width: "100%" }}&gt;
            thisisalongstringthanusualhencenotfilledincontiner
          &lt;/Tooltip&gt;
        }
      &gt;
        &lt;span&gt;Hover over this text&lt;/span&gt;
      &lt;/OverlayTrigger&gt;
  </code></pre>
  
  <p>Displaying tooltip works fine but the alignment is not proper.</p>
  
  <p>You can see that I have given continuous string inside tooltip (in my real app the string is dynamic and it is a token there and will be even longer than I have given above so I can't change this continuous string). </p>
  
  <p>The problem is only a few parts of the string is visible while hovering, and rest of the string is out of the container.</p>
  
  <p><strong>Working sandbox:</strong> <a href="https://codesandbox.io/s/react-bootstrap-tooltip-button-modal-wjybr" rel="nofollow noreferrer">https://codesandbox.io/s/react-bootstrap-tooltip-button-modal-wjybr</a></p>
  
  <p>Tried giving <code>style={{ width: "100%" }}</code> to the tooltip but no luck.. It still doesn't fit into tooltip container..</p>
  
  <p>I am in the need to make it fit into the container. So kindly help me to fit the entire string into the tooltip container.</p>